Question

我正在尝试简化下面的代码，它是在角度控制器内部，动态添加属性并重新编译指令内部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中的元素？我问，因为可能有更好的解决方案。

其次，您提出的两种解决方案都不起作用。是的，他们似乎给你的结果与显示的结果相同，但是如果你使用的是双向绑定，那么你就无法取回它。

这样一旦<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);
            };
        }
    }
})

angular directive内部html重新编译，动态创建绑定属性

1 个答案: