区分自定义指令的作用域方法angularjs

Question

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

问题是当我点击链接为什么它总是引用自定义指令的第二个元素为什么它不能引用这两个元素？我怎样才能做到这一点，以及如何区分“myDirective”自定义指令中的scope.click函数内的两个元素？

Answer 1

问题是，您的指令中没有定义隔离范围。这意味着两个指令都与控制器共享范围。由于您正在使用您的指令两次，因此您定义了两次事件scope.click，因此您将覆盖第一个元素的scope.click。此外，您还可以覆盖<a>标签的ng键。

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()。

UPDATE

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

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

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

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

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作为参考。