如何获取在同一页面上多次使用的指令的正确属性？

Question

Angular 1.4.8

Here is JSFiddle

我在一个页面上使用了两次指令。我只更改了指令的一些属性。看来，我只获得searchRelations函数中最后定义的属性。

当我在第一个文本输入中搜索时，是否可以获得关系A属性，当我在第二个文本输入中搜索时获取关系B属性？

Answer 1

添加

scope: true

在您的指令中，否则，它们都共享父项。

Answer 2

正如@ssougnez所说

scope: true

将其设置为true而不是{}之间的重要区别是 新范围将原型继承父范围的属性。 这里有更多解释：

What is the difference between scope:{} and scope:true inside directive?

Answer 3

我将search-bar指令分解为一个自包含的东西，它有自己的隔离范围，以及清理你的模板。看看：https://jsfiddle.net/y61rca5e/5/

这完全奏效了！