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

如上所述，您不能在同一元素上创建两个指令来创建多个作用域，无论是isolate还是child。

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

如果你所做的只是观察属性值的更改：

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

Answer 2

根据角度设计you can't have an two isolated scope directive应用于同一DOM元素（Reference Link）（）

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

最佳实践：使用scope选项创建隔离范围制作要在整个应用中重复使用的组件。

我希望您以嵌套的方式使用transclusion或place指令，这样就可以了

<强> HTML

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

Plunkr

希望这可以帮助你，谢谢。

AngularJS对同一元素的多个指令，$ compile：multidir ERROR

2 个答案: