javascript - Angular Directive(指令)内部 html 重新编译并动态创建绑定(bind)属性

Question

我试图简化下面的代码，它位于 Angular Controller 内部，动态添加属性并重新编译指令内部 html。

additionalInfo: '=',

此属性启用模板中的部分代码，因此在动态创建时必须重新编译

$element.attr('additional-info', "'test'");
var template = angular.element('<a></a>').append($element.clone()).html();
$element.replaceWith($compile(template)($scope.$parent));

代码工作正常，我正在尝试将代码精简到最少，有什么想法吗？也许可以更换一些东西来看起来更好？

我还有两个选项，它们产生相同的结果:

var template = angular.element('<a></a>').append($element.clone()).html();
var template = $element.get(0).outerHTML;
var template = $element.html($element.get(0).cloneNode(true));

它们都工作正常，但最后一个实际上返回一个对象，但这仍然有效？如何？为什么？优点缺点？

Answer 1

首先，为什么要重新编译 DOM 中的元素？我问是因为可能有更好的解决方案。

其次，您提出的两种解决方案都不起作用。是的，它们似乎给您提供了与显示的结果相同的结果，但是如果您使用双向绑定(bind)，您丢失的结果将无法恢复。

这样一次<div>{{value}}</div>已解决，它将永远是已解决的值 <div>SomeValue</div> .

要完全按照原样重新编译代码，您需要预编译 DOM，它仅在指令编译函数中可用。您需要存储未编译的 HTML，并在发生某些情况时更改它并重建它。

.directive('someDirective', function() {
    return {
        compile: function($element, $attrs) {
            var originalHtml = $element[0].outerHTML;
            return: function(scope, element, attrs) {
                // some action occurs
                var newElement = angular.element(originalHtml);
                element[0].insertBefore(newElement, element[0].parent);
                $compile(newElement)(scope);
            };
        }
    }
})