Question

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

Answer 1

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

指令（链接功能）

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

AngularJS指令等到模板呈现

1 个答案: