Fatal编程技术网
  • javascript/
  • Javascript AngularJs$watch throws无法读取属性'；替换儿童'；空的

Javascript AngularJs$watch throws无法读取属性'；替换儿童'；空的

javascript angularjs

Javascript AngularJs$watch throws无法读取属性'；替换儿童'；空的,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我创建了一个如下所示的指令： app.directive('superDir', function () { function link(scope, element, attrs) { scope.$watch('elements', function (value, old) { element.replaceWith(scope.elements.join("")) },true); } re

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

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

    return {
        link: link
    };
});
但是，随后修改了
元素
数组，触发了
$watch
，我收到一个异常：

Cannot read property 'replaceChild' of null
html如下所示：

<body ng-app="myApp">
<div ng-controller="MainCtrl">
  <super-dir></super-dir>
</div>
您能告诉我为什么不能更换
super dir
标签吗

谢谢

您是否尝试过控制台。将您的元素记录在监视程序中？或许

if(typeof element != 'undefined' && element != null) { ..... }
您是否尝试将您的元素记录在监视程序中？或许

if(typeof element != 'undefined' && element != null) { ..... }
我知道这有点晚了，但是我已经忙了一天了，我调查了这个问题

我假设，您想要实现的是在运行时动态加载和切换模板

在
replaceWith（）
调用中出现错误的原因在于
.find（）
方法的内部使用，原则上，您（就像我一样）做得错误，含义错误，而不是角度错误

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

这可以在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);
        });
};
因此，您的指令要么在标准模板中使用一个换行元素替换它，要么不完全替换该元素。无论哪种方式，都要替换指令的内容，而不是指令本身，指令应该正常工作

变得像水一样，我的朋友。

我知道这有点晚了，但我已经忙了一天了，我调查了这个问题

我假设，您想要实现的是在运行时动态加载和切换模板

在
replaceWith（）
调用中出现错误的原因在于
.find（）
方法的内部使用，原则上，您（就像我一样）做得错误，含义错误，而不是角度错误

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

这可以在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);
        });
};
因此，您的指令要么在标准模板中使用一个换行元素替换它，要么不完全替换该元素。无论哪种方式，都要替换指令的内容，而不是指令本身，指令应该正常工作

变得像水一样，我的朋友。

尝试
angular.element（element[0]）。替换为（…）
而不是
element.replace为（…）
。但我认为您应该研究一个指令模板。replaceWith接受用引号包装的html。您正在传递scope本身。我正在传递
scope.elements.join（“”
），它是一个包含html的字符串，因为scope.elements中的每个元素都是元素本身。请显示scope.elements对象。它是：
['added'，'added']
Try
angular.element（元素[0]）。替换为（…）
而不是
元素。替换为（…）
。但我认为您应该研究一个指令模板。replaceWith接受用引号包装的html。您正在传递scope本身。我正在传递
scope.elements.join（“”
，它是一个包含html的字符串，因为scope.elements中的每个元素本身都是一个元素。请显示scope.elements对象。它是：
['APPENDED'，'APPENDED']
谢谢，我也遇到了同样的问题，可以确认这解决了。谢谢，我也有同样的问题，可以确认这解决了它。