问题描述
也许标题并不完美-但我不久将解释：
在我的HTML我使用的是ng-click指令：（我在HTML代码中使用了几个具有不同参数（例如“ main”，“ action”，“ more”等）的ng-clicks指令。
ng-click="clickMe('main')"
我有一个控制器来获取id - 'main' ：
.controller('clickCtrl', ['$scope', function ($scope) {
$scope.clickMe= function (id) {
console.log("button: " + id);
}
}]);
我想在我的指令链接函数中分配$scope.clickMe并获取传递的id值：
.directive('clickDir', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var click = scope.clickMe;
click = function(id) { //can I get the "id" here from controller also?
//some stuff
}
}}});
但这不起作用，您能帮我吗？
编辑
HTML中的一些代码：
<div class="my-navbar">
<ul click-dir>
<li>
<a ng-click="clickMe('main')" href="..." class="..."></a>
</li>
</ul>
</div>
<div class="action-navbar">
<ul click-dir>
<li ng-repeat="..."> //a lot of <li> generated by ng-repeat
<a ng-click="clickMe('actions')" href="..." class="..."></a>
</li>
</ul>
</div>
<div class="search-navbar">
<ul click-dir>
<li ng-repeat="..."> //a lot of <li> generated by ng-repeat
<a ng-click="clickMe('search')" href="..." class="..."></a>
</li>
</ul>
</div>
我想从click-dir指令中的ng-click获取id参数，因为我想进行一些DOM操作。
1楼
如果您只想处理指令中的click事件，则可以直接执行此操作，而无需使用ng-click 。
像这样：
link: function (scope, element, attrs) {
// get "id" from attrs or declare it in your directive config in scope
element.on('click', function() {
// use "id" here...
});
}
如果“ id”参数是一个简单的字符串，则可以执行以下操作：
scope: {
clickDir: '@'
},
link: function (scope, element, attrs) {
element.on('click', function() {
// use scope.clickDir here...
});
}
HTML将变成：
<a click-dir='main'>...</a>
（同样，假设除了从HTML传递常量“ id”值之外，实际上不需要合并控制器/外部范围和指令。）
2楼
您可以使用＆角度绑定，它允许指令的隔离范围将值传递到父范围，以便在属性中定义的表达式中求值，在本例中，我们定义了click属性。
因此，您可以将函数定义到Controller中，并将其绑定到指令。
控制者
(function(){
function Controller($scope) {
$scope.click = function(id){
console.log('button : ' + id)
}
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
指示
(function(){
function clickDir() {
return {
restrict: "A",
scope: {
//Use '&' binding to evaluate expression
click: '&'
},
link: function(scope, element, attr){
//Listen for click event
element.on('click', function(){
//Call click controller function
scope.click();
});
}
};
}
angular
.module('app')
.directive('clickDir', clickDir);
})();
的HTML
<body ng-app="app" ng-controller="ctrl">
<button type="button" click-dir click="click('tata')">button</button>
<button type="button" click-dir click="click('toto')">button2</button>
<button type="button" click-dir click="click('titi')">button3</button>
</body>