我什么时候应该在Angular中使用隔离范围?

时间:2014-10-15 20:05:48

标签: javascript angularjs angularjs-directive

the AngularJS guide中说:

  

顾名思义,指令的隔离范围是隔离的   除了您已明确添加到范围的模型之外的所有内容:{}   哈希对象。这在构建可重用组件时很有用,因为   它可以防止组件更改模型状态,除了   您明确传入的模型。

......这听起来很棒。似乎最好的做法是尝试在所有指令中使用隔离范围来保持它们的封装。

但是,我发现如果我尝试将两个带有隔离范围的指令添加到同一个元素,Angular错误说我只能有1个指令,每个元素有一个隔离范围。这似乎是非常有限的,有点违背了隔离范围的目的。

对我而言,在决定您的范围是否被隔离时,您不必担心您的指令是否会与其他指令一起使用。

我错过了什么吗?

我是否应该默认为非隔离范围?如果是这样,当我应该隔离我的范围时,是否有经验法则?

2 个答案:

答案 0 :(得分:3)

通常,隔离范围应该用于独立指令 - 那些不能(也不应该)被其他任何东西修改的指令,没有外部影响,没有附加组件(这包括通过使用修改它们)当然,另一个关于其元素的指令。)

为什么这是一个问题?

假设您的元素上有两个带隔离范围的指令。他们每个人都有一个名为cdmckay

的属性
<directive1 directive2 ng-show="cdmckay"></directive1>

哪一个具有更高的优先级,directive1directive2的优先级?该元素是否应该显示?

无法知道所使用的值是来自指令1还是指令2。我想如果它们不共享属性名称可能会将多个隔离范围合并为一个(如果它们共存则只会抛出错误),但我怀疑Angular是否会采用这种方式。

如果您的指令不相互补充,那么解决这个问题的方法是使用父子元素,所以请说:

<directive1 directive2></directive1>

你这样做:

<directive1>
    <directive2></directive2>
</directive2>

我知道它在许多情况下似乎并不正确,但如果使用隔离范围,这是组合指令的方法之一。但同样,如果您希望directive1能够扩展某些东西,那么就这样构建(其中一种方法是避免在directive2上使用隔离范围)。

如果你发布你的例子,人们可能会给出较少的通用答案。我希望这会让你朝着正确的方向前进。


Brett的双重小部件评论是现场观点:

  

如果我有一个日历小部件和一个listview小部件(实现为具有独立范围的指令),为什么我会将它们应用于同一个元素呢?

答案 1 :(得分:0)

我认为你可以把它们放在不同的元素上来解决这个问题。

<div my-custom-dir1 with-some-property="1"><span my-custom-dir2 with-some-property="2"></span></div>