Angular 1.2 不再允许在同一元素上使用多个隔离的作用域指令? [英] Angular 1.2 no longer allows multiple isolated scope directives on same element?

问题描述

我在一个 Angular 项目中有一些代码，它们使用两个独立范围的独立指令.它们不需要共享作用域，只存在于同一个元素上.它们都以稍微不同的方式改变 DOM，重要的是绑定到作为参数传递的值.

这在 1.0 中有效，但是 Angular 1.2 现在在尝试执行此操作时会生成错误

<块引用>

多个指令要求新的/隔离的作用域

根据项目 git history 出现，Angular 1.2 改变了行为，将两个独立的指令保持在同一元素上分开.这是一件好事，当在同一个元素上放置两个属性"指令时它可以正常工作.

即

<div my:directive="myDirectiveData" my:other-directive="myOtherDirectiveData"/>

按预期工作.

不过

<my:directive my:directive-data="myDirectiveData" my:other-directive="myOtherDirectiveData"/>

抛出上述错误.(多个指令要求新的/隔离的范围)

在这种情况下，我希望每个指令仍然与它们自己的非共享隔离范围并行存在.

这在 Angular 1.2 中还有可能吗?

解决方案

在同一个元素上定义多个指令时发生的情况总结:

<预>场景指令#1 指令#2 结果1 no new scope no new scope 两个指令都使用控制器的作用域.(这应该是显而易见的.)2 new scope new scope 两个指令都share一个新的子作用域.3 new scope no new scope 两个指令share一个新的子作用域.为什么 dir #2 使用子作用域?这对我来说似乎很奇怪.4 隔离范围没有新的范围 Angular v1.0:两个指令share隔离范围.Angular v1.2+:dir #1 使用隔离范围，dir #2 使用控制器的范围.

注意以下场景是不允许的(Angular 会抛出错误):

<预>场景指令#1 指令#25 隔离范围新范围6 隔离范围 隔离范围

I have some code in an Angular project that use two separate directives with isolated scope. They do not need to share scope, simply exist on the same element. They both alter the DOM in slightly different ways, and importantly bind to values passed as arguments.

This worked in 1.0, however Angular 1.2 now generates an error when attempting to do this

Multiple directives asking for new/isolated scope

Based on the projects git history appears Angular 1.2 changes behaviour to keep two isolated directives on the same element separate. This is a good thing, and it works correctly when putting two 'Attribute' directives on the same element.

i.e.

<div my:directive="myDirectiveData" my:other-directive="myOtherDirectiveData" />

works as you would expect.

however

<my:directive my:directive-data="myDirectiveData" my:other-directive="myOtherDirectiveData" />

Throws the above error. (Multiple directives asking for new/isolated scope)

In this scenario I would have expected each directive to still exist in parallel with their own unshared isolated scope.

Is this still possible in Angular 1.2?

解决方案

Summary of what happens when multiple directives are defined on the same element:

  Scenario  directive #1   directive #2   Result
     1      no new scope   no new scope   Both directives use the controller's scope.
                                          (This should be obvious.)
     2      new scope      new scope      Both directives share one new child scope.
     3      new scope      no new scope   Both directives share one new child scope.
                                          Why does dir #2 use the child scope?
                                          This seems odd to me.
     4      isolate scope  no new scope   Angular v1.0: both directives share the
                                          isolate scope.
                                          Angular v1.2+: dir #1 uses the isolate scope,
                                          dir #2 uses the controller's scope.

Note that the following scenarios are not allowed (Angular throws an error):

  Scenario  directive #1   directive #2
     5      isolate scope  new scope
     6      isolate scope  isolate scope

这篇关于Angular 1.2 不再允许在同一元素上使用多个隔离的作用域指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！