$postLink是一个angular组件/指令运行得太早。

12 浏览
0 Comments

$postLink是一个angular组件/指令运行得太早。

更新：我在这个问题上悬赏。我不想要任何黑客或变通的方法。我想要一种官方的方法来访问angular组件中的dom，并解释为什么我看到的行为（$postLink运行太早）似乎与官方文档相矛盾。

官方文档中写道（这里）：

$postLink() - 在这个控制器的元素及其子元素被链接后调用。类似于post-link函数，此钩子可以用于设置DOM事件处理程序和直接的DOM操作。

原始问题：我在这里有一个问题的例子-> http://plnkr.co/edit/rMm9FOwImFRziNG4o0sg?p=preview

我正在使用一个angular组件，我想在post link函数中修改dom，但它不起作用，似乎这个函数运行得太早，在所有angular处理完成后，模板实际上还没有准备好在dom中。

在html页面中，我有这个：

该组件被定义为：

appModule.component('myGrid',{
    controller: gridController,
    bindings: {
        "gridId": "<",
    },
    templateUrl: 'gridTemplate'
});

在组件模板中，我有这个：


...



（绑定本身是有效的，毫无疑问。最终，在html中，表的id是'foo'，如预期的那样）。
在控制器中，我有这样的代码：
function gridController($scope, $compile, $attrs) {
    console.log ("grid id is: " + this.gridId); // 'foo'
    this.$postLink = function() {
        var elem = document.getElementById(this.gridId);
        // 对elem做一些操作，但elem为空
    }
}



当我调试时，我看到当执行$postLink函数时，表在dom中，但它的id属性仍然是{{$ctrl.gridId}}而不是foo，所以document.getElementById()找不到任何东西。这似乎与文档相矛盾。
我错过了什么？在组件中有其他访问dom的方法吗？
更新2：今天我意识到常规指令的链接函数也会出现同样的问题，它不仅限于组件。所以显然我误解了“进行直接的DOM操作”的意思-链接函数在与dom分离的元素上运行，所以使用带选择器的document对象是没有用的。

															
0