Question

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

Answer 1

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

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: {}发表评论，则表明其工作正常，您可以看到false和true范围共享。我还没有调查false或true是否胜出，但我怀疑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];
    }
  }
});

Answer 2

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

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

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

*我想它只接受JSON

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

2 个答案: