javascript – AngularJS指令等到模板呈现

2019年8月6日 200次阅读

我正在尝试在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的东西只是上下文,它实际上与我试图解决的问题无关)

最佳答案 你需要在你的指令链接函数中使用attrs.$observe,它与$watch一样,不同之处在于它可以在{{}}插值指令上观察,你的链接函数将如下所示.每当插值指令被评估时调用函数.

指令(链接功能)

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