AngularJS指令等待模板渲染

Question

我正在尝试用AngularJS指令包装SharePoint People Picker。为了初始化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 仍然具有 "test-{{ $index }}" 的 id，并且只有在指令编译后才会变成 "test-0"。

如何确保我的指令在 {{}} 渲染完成后运行？

（因为 SharePoint 只是上下文，与我要解决的问题实际上并不相关，所以不需要标记为 SharePoint）

- Joshua Walsh

---

我暂时使用setTimeout和1毫秒的延迟来使代码工作。我更希望有一种更好的方法，但这个方法可以工作。 - Joshua Walsh

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.
    });
}

- Pankaj Parkar