Question

所以我有你可以看到的这个plunker，你看我在链接上使用了scope.click方法，它上面有一个ng-click函数，我在里面定义了scope.click = function() {} ＆＃39; myDirective＆＃39;自定义指令。

问题是当我点击链接时为什么它总是引用自定义指令的第二个元素为什么它不能引用这两个元素？我怎样才能实现这一目标，以及如何区分scope.click函数内的两个元素＆＃39; myDirective＆＃39;自定义指令？

Answer 1

问题是，您的指令中没有定义隔离范围。这意味着两个指令都与控制器共享范围。当您使用指令两次时，您将scope.click事件定义两次，因此您将覆盖第一个元素的scope.click。此外，您还会覆盖<a>标记的ng-click。

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.click = function() {
     console.log("Inside controller");
  }
});

app.directive('myDirective', function() {
   return {
     restrict:'EA',
     scope: {},
     template: "<div ng-click='click()'>click me</div>",
     link:function(scope,elm, attr) {
       scope.click = function() {
         console.log("Inside directive " + attr['id']);
       }
     }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MainCtrl" ng-init="Test=1;">
    <a href='javascript:;' ng-click="click()">click link</a>

    <my-directive id="elm">
    </my-directive>
  
    <my-directive id="elm2">
    </my-directive>
</div>

在此示例中，我使用scope: {}定义了一个隔离的范围。现在每个指令都有自己的范围。另外，我为每个范围定义click()。

<强>更新

如果你真的想在点击指令之外的元素时执行指令的功能，你可以这样做。但是，这不是一个好的解决方案。我通常会考虑你的问题来解决它。

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.click = function($event) {
     $scope.activateElement[$event.target.id]();
  }
  $scope.activateElement = Array();
});

app.directive('myDirective', function() {
   return {
     restrict:'EA',
     link:function(scope,elm, attr) {
       scope.activateElement[attr['forid']] = function() {
         console.log("Inside directive " + attr['forid']);
       }
     }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MainCtrl">  
  <a href='javascript:;' ng-click="click($event)" id='elm'>click link</a>
  <!-- when I click above link, I run the click methods under 'elm' custom directive -->
  <my-directive forid="elm">
  </my-directive>

  <a href='javascript:;' ng-click="click($event)" id='elm2'>click link</a>
  <!-- when I click above link, I run the click methods under 'elm2' custom directive -->
  <my-directive forid="elm2">
  </my-directive>
</div>

Answer 2

这两个指令共享相同的范围，因此会覆盖彼此的点击功能。

如果您不想使用隔离范围并且仍然区分每个指令，则可以在范围上使用一个共享单击函数，并使用指令将存储回调的附加数组。 click函数将只调用所有已注册的回调：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.clickCallbacks = [];
  $scope.click = function() {
    angular.forEach($scope.clickCallbacks, function(callback) {
      callback();
    });
  };
});

app.directive('myDirective', function() {
   return {
     restrict:'EA',
     link:function(scope,elm, attr) {
       scope.clickCallbacks.push(function() {
         console.log(attr);
       });
     }
   }
});

请参阅此工作Plunker作为参考。

区分自定义指令angularjs的范围方法

2 个答案: