自定义指令的链接中的element.replaceWith仅在首次调用时起作用

问题描述

我是Angularjs的新手，对幕后的了解也不多.基本上，我想基于控制器中的数据创建一个'E'kink指令，我像整个'table'一样动态创建html来替换该指令.

I am new to Angularjs, and don't understand too much behind the scene. Basically I want to create an 'E' kink directive, base on the data in controller I dynamically create the html, like a whole 'table' thing, to replace the directive.

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

The directve in my html file is like this:

<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并替换了指令标记.当我第一次更改'currentPage'时， element.replaceWith(html)可以正常工作.然后，我更改'currentPage angin，将触发观看功能，但 element.replaceWith(html)无法正常工作.

Through watching currentPage's change I recreate the html and replace the directive tag.When the first time I change 'currentPage', the element.replaceWith(html) works fine. Then I change 'currentPage angin, the watching function will be triggered, but the element.replaceWith(html) won't work.

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

Then I stepped into Angularjs source code, I found, after the first time element.replaceWith's execution, element[0].parentNode became null, this caused the replaceWith crash.

有人知道如何使它起作用吗?

Anybody know how to make it work?

推荐答案

您似乎试图多次替换同一元素.但是一旦被替换，它就消失了.为了解决这个问题，将currentHtml存储在一个变量中.像这样:

It looks like you're attempting to replace the same element several times. But once it's been replaced, it's gone. To solve this store the currentHtml in a variable. Something like this:

        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;
                }
            });
         }

这篇关于自定义指令的链接中的element.replaceWith仅在首次调用时起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！