Angular 指令内部 HTML 重新编译，动态创建绑定属性

angular directive inner html recompilation with creating a bind attribute dynamically

本文关键字：动态 创建 属性 绑定 编译 内部 指令 HTML 新编译 Angular      更新时间：2023-09-26

我正在尝试简化下面的代码，该代码位于角度控制器内部，动态添加属性并重新编译指令内部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));

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

首先，

为什么要重新编译 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);
            };
        }
    }
})
相关文章：