1

我需要从我的链接函数中操作 DOM。

我注意到，当我将替换设置为 false 时，我能够访问 DOM（http://jsfiddle.net/bcsU8/）

//body of directive
return {
    restrict: 'A',
    replace: false,
    scope: {
        bar: '@myDir'
    },
    template: '<div id="{{bar}}">foo bar is <span>{{bar}}</span></div>',
    link: function(scope, element, attr) {
        scope.$watch('myDir', function(value) {
            console.log('In watch - scope.bar: ', scope.bar);
            console.log('DOM accesible? ', $("#"+scope.bar).length == 1);
        });
    }
};

但是当我将其设置为 true 时，我不能（http://jsfiddle.net/PpXgb/）

return {
    restrict: 'A',
    replace: true,
    scope: {
        bar: '@myDir'
    },
    template: '<div id="{{bar}}">foo bar is <span>{{bar}}</span></div>',
    link: function(scope, element, attr) {
        scope.$watch('myDir', function(value) {
            console.log('In watch - scope.bar: ', scope.bar);
            console.log('DOM accesible? ', $("#"+scope.bar).length == 1);
        });
    }
};

为什么我在替换打开时无法访问 DOM？我在文档中没有发现任何内容表明这两种情况之间应该存在差异。

从有关链接功能的文档中，听起来 DOM 在链接过程之后可用：（http://docs.angularjs.org/guide/directive）

链接后功能 在子元素链接后执行。在 post-linking 函数中进行 DOM 转换是安全的。

请注意，在我的 scope.$watch 中，我实际上是在调用一个期望 DOM 存在的 jQuery 插件，而不是通过 $() 直接访问元素

4

1 回答 1

1

link在这种情况下，您的问题是当函数运行时元素尚未附加到 DOM 。对于您要尝试做的事情，这并不是真正的问题。问题是您尝试不通过element传递给link函数的对象而是通过 jQuery 选择器来访问元素，从而打破了最佳实践。尝试使用该element对象，我想你会发现你的代码突然可以工作了。

但是指令方法的执行顺序有一些注意事项，因此在某些情况下这仍然不起作用，但您不太可能在基本指令中遇到它们。同样，您应该阅读有关指令的指南页面，以更好地了解 AngularJS 如何处理指令。

于 2013-03-11T20:35:28.930 回答