AngularJS 同一元素上的多个指令，$compile:multidir 错误

Question

这里是 plunkr： http://plnkr.co/edit/CzcVzKSvpKJTuTKARVJz?p=preview

这是我的简单代码：

.directive('ngB', [function () {
    return {
      'restrict': 'A',
      'scope': {
        'ngB': '='
      },
      'link': function($scope, el) {

        var clss = 'b'
          , go = function () {

            if ($scope.ngB) {

              el.removeClass('a');
              el.addClass(clss);
            } else {
              el.removeClass(clss);
            }
          };

        $scope.$watch('ngB', function () {
          go();
        });
      }
    };
  }])
  .directive('ngF', [function () {
    return {
      'restrict': 'A',
      'scope': {
        'ngF': '='
      },
      'link': function($scope, el) {

        var clss = 'f'
          , go = function () {
            if ($scope.ngF) {

              el.removeClass('a');
              el.addClass(clss);
            } else {
              el.removeClass(clss);
            }
          };

        $scope.$watch('ngF', function () {
          go();
        });
      }
    };
  }]);


  //view.html
  <span ng-b="2 > 1" ng-a="1 > 2">here</span>

它 returns 控制台出现这个错误：https://docs.angularjs.org/error/$compile/multidir

如何在不从 elmeent

中删除其中一个指令的情况下解决此问题

非常感谢。

Answer 1

按照angular设计you can't have an two isolated scope directive applied on the same DOM element (Reference Link)()

如果您查看 AngularJS 文档，您会发现他们确实建议在某些情况下使用隔离范围：

Best Practice: Use the scope option to create isolate scopes when making components that you want to reuse throughout your app.

我更希望您以嵌套方式使用嵌入或放置指令，这样就可以了

HTML

<span ng-b="2 > 1">Outside
   <span ng-a="1 > 2">Inside
</span>

Plunkr

希望对您有所帮助，谢谢。

Answer 2

正如上面所建议的，您不能让两个指令在同一个元素上创建多个作用域，无论是隔离作用域还是子作用域。

您并不总是需要隔离范围。

如果您所做的只是观察 属性值的变化:

<span ng-f="{{1 < foo}}"></span>

然后您可以通过 attrs.$observe:

获取更改

link: function(scope, element, attrs){
  attrs.$observe("ngF", function(v){
     // do something
  });
}

但是，如果您正在观察分配给属性或表达式结果的模型值的变化

<span ng-f="foo"></span> <span ng-f="foo === 10"></span>

在我看来是这种情况，您可以使用 $parse 服务和 $watch 来查看值的变化。

link: function(scope, element, attrs){ var parsed = $parse(attrs.ngF); scope.$watch(function(){ return parsed(scope); }, function(v){ // do something }); }

AngularJS 同一元素上的多个指令，$compile:multidir 错误

AngularJS multiple directives on same element, $compile:multidir ERROR

javascript

angularjs

angularjs-directive