Я пытаюсь создать многоразовую директиву нечто вроде сетки. Я хочу определить данные и действия (изменить, удалить, ...) в контроллере.Как переменная prerender в угловой директиве для ng-repeat?
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}}
Обновлен пример: Добавлен нг нажмите для удаления
Проверьте свою ноту в нижней части его вопроса. ;) – Langdon
@rajkamal спасибо, эта работа, но только для href, но у меня также есть «ng-click», и для этого действия этот подход не работает. Я обновил пример для действия удаления, чтобы понять, что я имею в виду. Например. Мне нужно в шаблоне 'ng-click =" doAction ({name: 'delete', id: row.id}) ", и если я создам подобную интерполяцию для' ng-click', это не сработает. Это действие вставляется в ng-click, но может быть угловатым, не знает об этом. Вы знаете, как это исправить? спасибо – MarekLi