區分自定義指令的作用域方法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作爲參考。