我尝试创建像网格这样的可重用指令。我想在控制器中定义数据和操作(编辑、删除……)。
app.controller('MainCtrl', function($scope) {
$scope.data = [
{id: 1, name: 'aaa'},
{id: 2, name: 'bbb'},
{id: 3, name: 'ccc'},
];
$scope.actions = [
{label:'edit', href:'#edit/{{row.id}}'},
{label:'delete', ngClick:'doAction({name:\'delete\', id:row.id})'}
];
$scope.doAction = function (name, id) {
$scope[name](id);
}
$scope.delete = function (row) {
console.log('deleted' + row.id);
}
});
问题是如何为ng-repeat
.
app.directive('list', function () {
return {
scope: {
data: '=',
actions: '=',
doAction: '&'
},
template:
'<li ng-repeat="row in data">{{row.name}} ' +
'<span ng-repeat="action in actions">' +
'<a href="{{action.href}}" ng-click="{{action.ngClick}}">' +
'{{action.label}}' +
'</a> ' +
'</span>' +
'</li> '
}
});
现在是在行动链接<a href="#edit/{{row.id}}">
,但我需要这个<a href="#edit/1>
。并且对于删除 ng-click 不起作用。我尝试使用编译,但我无法做到。你能帮助我吗?可能动作可能是列表的子指令,问题是一样的。
这是 plunker 中的实时模板:http ://plnkr.co/edit/O7hXXgQb0Num1xZs5Xrt?p=preview
注意:我知道我可以在 ctrl 中修改动作定义,href:'#edit'
但这<a href="{{action.href}}/{{row.id}}">
不是很好的解决方案,因为在该指令的其他用法中$scope.data
,我可以从中传递给动作的其他参数,并非总是如此{{row.id}}
更新示例:添加了 ng-click 以删除