Как переменная prerender в угловой директиве для ng-repeat?

Question

Я пытаюсь создать многоразовую директиву нечто вроде сетки. Я хочу определить данные и действия (изменить, удалить, ...) в контроллере.

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}}

Обновлен пример: Добавлен нг нажмите для удаления

Answer 1

@Langdon, жаль я не читал вопрос к полному. У меня есть еще один ответ, как указано ниже,

@urban_racoons pls. сообщите мне, работает ли это решение. Я изменил часть шаблона и добавлен контроллер к директиве

app.directive('list', function() { 
    return { 
      scope: { 
       data: '=', 
       actions: '=' 
      }, 
     controller:function($scope,$interpolate){ 
     $scope.hrefer = function(action,row){ 
      return $interpolate(action.href)({row:row}) 
     }   
     }, 
     template: 
     '<li ng-repeat="row in data">{{row.name}} ' + 
      '<span ng-repeat="action in actions">' + 
      '<a href="{{hrefer(action,row)}}">{{action.label}}</a> ' + 
      '</span>' + 
     '</li> ' 
     } 
}); 

Answer 2

Это немного неуклюжее, но это работает, и я думаю, что это достаточно общее, чтобы удовлетворить ваши потребности:

app.controller('MainCtrl', function($scope) { 
    $scope.data = [ 
    {id: 1, name: 'aaa'}, 
    {id: 2, name: 'bbb'}, 
    {id: 3, name: 'ccc'}, 
    ]; 

    $scope.actions = [ 
    {label:'edit', href: function(row) { return '#edit/' + row.id;}}, 
    {label:'delete', href: function(row) { return '#delete/' + row.id;}} 
    ]; 

}); 

app.directive('list', function() { 
    return { 
      scope: { 
       data: '=', 
       actions: '=' 
      }, 
      template: 
     '<li ng-repeat="row in data">{{row.name}} ' + 
      '<span ng-repeat="action in actions">' + 
      '<a href="{{action.href(row)}}">{{action.label}}</a> ' + 
      '</span>' + 
     '</li> ' 

     } 
});