Question

我是Angularjs的新手，并且在幕后不太了解。基本上我想创建一个＆＃39; E＆＃39;扭结指令，基于控制器中的数据我动态创建html，就像整个表格一样。更换指令的事情。

我的html文件中的directve是这样的：

<matrixrows></matrixrows>

我的指令代码是这样的：

angular.module('matrix', [.....])
.directive('matrixrows', [..., function (...) {
        return {
            restrict: 'E',
            replace: true,
            require: '^matrix',
            link: function (scope, element, attr, ctrl) {
                ......... 
                scope.$watch('currentPage', function (newValue, oldValue) {
                    if (newValue && newValue != oldValue) {

                        var html = "";
                        .......................
                        here is the code to generate the html
                        .......................
                        element.replaceWith(html);
                    }
                });
             }
    }])

通过观看 currentPage 的更改，我重新创建了html并替换了指令标记。当我第一次更改＆＃39; currentPage＆＃39;时， element.replaceWith（html）工作正常。然后我更改＆＃39; currentPage angin，将触发观看功能，但 element.replaceWith（html）不会起作用。

然后我进入Angularjs源代码，我发现，在第一次执行element.replaceWith执行后， element [0] .parentNode 变为 null ，这导致 replaceWith 崩溃。

有人知道如何让它发挥作用吗？

Answer 1

您似乎试图多次替换相同的元素。但一旦它被取代，它就消失了。要解决这个问题，将currentHtml存储在一个变量中。像这样：

        link: function (scope, element, attr, ctrl) {
            ......... 
            var currentElement = element;
            scope.$watch('currentPage', function (newValue, oldValue) {
                if (newValue && newValue != oldValue) {
                    .......................
                    var html = "";
                    here is the code to generate the html
                    .......................
                    var replacementElement = angular.element(html);
                    currentElement.replaceWith(replacementElement);
                    currentElement = replacementElement;
                }
            });
         }

Answer 2

您应该在生成的html字符串上使用$ compile（...）。

例如：

    link: function (scope, element, attr, ctrl) {
        ......... 
        var currentElement = element;
        scope.$watch('currentPage', function (newValue, oldValue) {
            if (newValue && newValue != oldValue) {
                .......................
                var html = "";
                here is the code to generate the html
                .......................
                var replacementElement = $compile(html)(scope);
                currentElement.replaceWith(replacementElement);
                currentElement = replacementElement;
            }
        });
     }

element.replaceWith在自定义指令的链接中仅在第一次调用时工作

2 个答案: