javascript - AngularJS 在同一元素上有多个指令，$compile :multidir ERROR

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>

它在控制台中返回此错误:https://docs.angularjs.org/error/$compile/multidir

如何在不删除 elmeent 中的指令之一的情况下解决此问题

非常感谢。

Answer 1

如上所述，您不能使用两个指令在同一元素上创建多个作用域(无论是隔离作用域还是子作用域)。

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

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

<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
   });
}