在AngularJS中编写指令时,如何确定我是否不需要新的作用域,新的子作用域或新的孤立作用域?

前端之家收集整理的这篇文章主要介绍了在AngularJS中编写指令时,如何确定我是否不需要新的作用域,新的子作用域或新的孤立作用域?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在寻找一些指导,可以用来帮助确定在编写新指令时使用哪种类型的范围。理想情况下,我想要一个类似于流程图的流程图,让我了解一系列问题,并提出正确的答案 – 没有新的范围,新的子范围或新的隔离范围 – 但这可能要求太多。这里是我目前一些微不足道的准则:

>如果使用指令的元素使用ng-model,则不要使用隔离的作用域
Can I use ng-model with isolated scope?Why formatters does not work with isolated scope?
>如果指令不修改任何作用域/模型属性,则不要创建新作用域
>如果指令封装一组DOM元素(the documentation说“复杂的DOM结构”),并且指令将用作元素,或者在同一元素上没有其他指令,则隔离范围似乎工作得很好。

我知道在元素上使用带有隔离作用域的指令会强制该相同元素上的所有其他指令使用相同的(一个)隔离作用域,因此这不会严重限制何时可以使用隔离作用域?

我希望一些来自Angular-UI团队(或其他写了很多指令的人)可以分享他们的经验。

请不要添加一个简单地说“使用可重用组件的隔离示波器”的答案。

什么是一个伟大的问题!我很想听听别人说什么,但这里是我使用的指南。

高空前提:scope被用作我们用于在父控制器,指令和指令模板之间通信的“粘合剂”。

父作用域:作用域:false,因此没有新作用域

我不经常使用这个,但是作为@MarkRajcok说,如果指令不访问任何作用域变量(显然没有设置任何!),然后这是很好,只要我关心。这也有助于仅在父指令的上下文中使用的子指令(虽然总是有例外),并且没有模板。基本上,任何带有模板的东西都不属于共享范围,因为你固有地暴露了该范围的访问和操作(但我确信这个规则有例外)。

例如,我最近创建了一个指令,使用我正在编写的SVG库绘制一个(静态)矢量图形。 It $观察两个属性(宽度和高度),并在其计算中使用它们,但它既不设置也不读取任何作用域变量,并且没有模板。这是不创建另一个范围的一个很好的用例;我们不需要一个,那么为什么还要呢?

但是在另一个SVG指令中,我需要一组数据来使用,另外还必须存储一小段状态。在这种情况下,使用父范围将是不负责任的(再次,一般来说)。所以…

子范围:范围:true

具有子范围的指令是上下文感知的,并且旨在与当前范围交互。

显然,这个隔离范围的一个关键优点是用户可以自由地对他们想要的任何属性使用插值;例如在带有隔离范围的指令上使用class =“item-type – {{item.type}}”将在默认情况下不起作用,但对于具有子范围的引用而言是正常的,因为默认情况下,父范围。此外,指令本身可以在其自身范围的上下文中安全地评估属性和表达式,而不必担心父母的污染或损害。

例如,一个工具提示是刚刚添加的东西;隔离范围将不起作用(默认情况下,见下文),因为我们预期在这里将使用其他指令或内插属性。工具提示只是一个增强。但是工具提示还需要在范围上设置一些东西,以便与子指令和/或模板一起使用,并且显然可以管理其自己的状态,因此使用父范围确实是非常糟糕的。我们要么污染它,要么损坏它,也不是bueno。

我发现自己使用子范围比隔离或父范围更频繁。

隔离作用域:作用域:{}

这是可重复使用的组件。

猜你在找的Angularjs相关文章