Question

我创建了三个指令

 app.directive('directiveOne',function(){
   return 
   { restrict: 'E',
     controller: function($scope){
     $scope.elements = {};
     this.funOne = function(){
            $scope.elements.item1 = "value 1";               
        }
     this.funTwo = function(){
            $scope.elements.item2 = "value 2";
        }
    }
   }
 });

 app.directive('directiveTwo',function(){
 return{
    require: "directiveOne",
    restrict: 'A',
    link: function(scope, element, attribute, directiveOneCtrl){
      directiveOneCtrl.funOne();
    }
   }
});

app.directive('directiveThree',function(){
return{
    require: "directiveOne",
    restrict: 'A',
    link: function(scope, element, attribute, directiveOneCtrl){
      directiveOneCtrl.funTwo();
    }
  }
});

当我在视图中访问它们时，只执行一个指令（只执行第二个指令）

    <directive-one directive-two> {{elements.item1}} </directive-one>
    <directive-one directive-three> {{elements.item2}} </directive-one>

我可以知道是什么原因吗？

Answer 1

原因是您的指令都没有自己的范围，因此所有指令都共享相同的范围。当第一次实例化指令一的控制器时，将$ scope.elements的值重置为空对象。

要测试此操作，请尝试将scope: true添加到指令一定义对象。这将为指令的每个实例提供一个自己的范围。

角度定制指令内的通信

1 个答案: