angular如何处理具有多个指令的元素

时间:2015-06-10 14:26:26

标签: javascript angularjs

如果一个元素有多个指令,一个有scope:false,一个有scope:true,一个有scope:{},角度如何处理这个元素?

2 个答案:

答案 0 :(得分:2)

如果在同一元素中包含要求所有三个范围选项的所有三个指令,则会出现错误。 truefalse兼容并使用相同的范围,但添加{}会导致:

Error: [$compile:multidir] Multiple directives [isolatedScope, trueScope]
asking for new/isolated scope on:
<div false-scope="" true-scope="" isolated-scope="">

在这种情况下,当true尝试创建新的继承范围并{}尝试创建新的隔离范围时,true{}会发生冲突,合理的,也许是预期的$compile docs说:

  

如果同一元素上的多个指令请求新范围,则只创建一个新范围。

如果您有scope: true的多个指令,那么它们很好并且只有一个,但是scope: {}要求另外一种,而Angular不能生成两者。指令可以用priority声明,所以他们可以悄悄选择一个胜利者,但这会带来各种各样的惊喜,所以他们明智地决定对此大喊大叫。

这里a Plunker证明了这一点。我将所有三个范围放在一个div上,然后使用父范围中可用的数据在每个范围中声明数据。如果您对scope: {}发表评论,则表明其工作正常,您可以看到falsetrue范围共享。我还没有调查falsetrue是否胜出,但我怀疑true因为它向$compile表示需要新的范围。

HTML:

<body ng-controller="MainCtrl">
  <div false-scope true-scope isolated-scope>
    <b>False directive</b>
    <ul>
      <li>Loaded: {{ falseDirectiveLoaded }}</li>
      <li>Data: {{ falseDirectiveData }}</li>
    </ul>
    <b>True directive</b>
    <ul>
      <li>Loaded: {{ trueDirectiveLoaded }}</li>
      <li>Data: {{ trueDirectiveData }}</li>
    </ul>
    <b>Isolated directive</b>
    <ul>
      <li>Loaded: {{ isolatedDirectiveLoaded }}</li>
      <li>Data: {{ isolatedDirectiveData }}</li>
    </ul>
  </div>
</body>

JS:

app.controller('MainCtrl', function($scope) {
  $scope.one = 1;
  $scope.two = 2;
  $scope.three = 3;
});

app.directive('falseScope', function() {
  return {
    restrict: 'A',
    scope: false,
    link: function(scope, element) {
      scope.falseDirectiveLoaded = true;
      scope.falseDirectiveData = [scope.one, scope.two, scope.three];
    }
  }
});

app.directive('trueScope', function() {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element) {
      scope.trueDirectiveLoaded = true;
      scope.trueDirectiveData = [scope.one, scope.two, scope.three];
    }
  }
});

app.directive('isolatedScope', function() {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element) {
      scope.isolatedDirectiveLoaded = true;
      scope.isolatedDirectiveData = [scope.one, scope.two, scope.three];
    }
  }
});

答案 1 :(得分:0)

当JS使用duck typing时,范围可以接收任何类型的值,尽管它们可以过滤角度接受的值。

考虑到这一点,当角度接收范围时,我猜it verifies the type of the argument,并对其进行威胁。

  • 布尔值:让您控制是否继承范围
  • object *:允许您添加绑定到该指令的“新礼节”
  • 其他:我不知道如果传递任何其他类型(如字符串)角度的行为

*我想它只接受JSON