Question

我创建了一个如下所示的指令：

app.directive('superDir', function ()
{
    function link(scope, element, attrs) {
        scope.$watch('elements', function (value, old)
        {
            element.replaceWith(scope.elements.join(""))
        },true);
    }

    return {
        link: link
    };
});

然而，elements数组被修改，$watch被触发我收到异常：

Cannot read property 'replaceChild' of null

html看起来像这样：

<body ng-app="myApp">
<div ng-controller="MainCtrl">
  <super-dir></super-dir>
</div>

你能告诉我为什么不能替换super-dir标签吗？

由于

Answer 1

我知道这有点晚了，但我现在忙着解决同样的问题，我调查了这个问题。

我认为，您希望实现的是在运行时动态加载和切换模板。

replaceWith()调用中出现错误的原因在于.find()方法的内部使用，原则上您（就像我）正在执行错误，错误含义，而不是 Angular方式。

您正在尝试替换定义指令的元素。您可以想象 BEING 指令元素（如果您将水放入茶壶...... ）。

这可以在link函数中完成，但是在设置了指令并且是DOM的一部分之后，你可以通过替换它来从DOM中删除指令本身，这对于Angular的选择器如何不能很好地解决工作

那么你可以做什么呢，而我现在正在做的是......只需替换它的内容！

var renderTemplate = function (scope, element, template) {
    var loader = Pages.getTemplate(template, false);
    var promise = loader
        .success(function(html) {
            var rendered = $compile(html)(scope);
            element.empty();
            element.append(rendered);
        });
};

因此，您的指令要么具有在标准模板中替换它的包装元素，要么您不会替换所有元素。无论哪种方式，替换指令的内容而不是指令本身，它应该正常工作！

变得像水，我的朋友。

Answer 2

你有没有尝试在观察者中使用console.log你的元素？或者

if(typeof element != 'undefined' && element != null) { ..... }

AngularJs $ watch throws无法读取null的属性'replaceChild'

2 个答案: