AngularJS指令等到模板呈现

时间:2015-04-30 05:20:20

标签: javascript angularjs angularjs-directive

我正在尝试在AngularJS指令中包装SharePoint People Picker。为了初始化一个人员选择器,我需要在页面上放置一个div,给它一个ID并将该ID传递给SharePoint函数。

我使用了这样的基本指令:

<sp-people-picker id="test"></sp-people-picker>

但我希望该指令可以在任何地方使用,包括在重复部分:

<div ng-repeat="item in dataset">
    <sp-people-picker id="test-{{ $index }}"></sp-people-picker>
</div>

这失败了。我逐步完成代码,看看出了什么问题,发现虽然我很乐意用“test-0”调用SharePoint人员选择器函数,但却找不到该元素。 document.getElementById("test-0")返回null。这样做的原因是我的div仍然有id“test - {{$ index}}”,并且在我的指令编译后才得到“test-0”。

如何确保我的指令在呈现{{}}后运行?

(不标记SharePoint作为SharePoint的东西只是上下文,它实际上与我试图解决的问题无关)

1 个答案:

答案 0 :(得分:2)

你需要在你的指令链接函数中使用attrs.$observe,它将像$ watch一样,区别在于它可以在{{}}插值指令上观察,你的链接函数会看起来如下。每当插值指令被评估时,它都会调用函数。

指令(链接功能)

link: function(scope, element, attrs){
    attrs.$observe(attrs.id, function(newVal, oldVal){
        //here you can get new value & `{{}}` is evaluated.
    });
}