问题描述
也许标题并不完美-但我不久将解释:
在我的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>