如何在ng-repeat的angular指令中預渲染變量？

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}}">但是這不是很好的解決方案，因爲在這個指令的其他用法可能是從其他PARAMS $scope.data，我可以傳遞到行動，而不是總是{{row.id}}

更新例如：增加了刪除

Answer 1

@Langdon NG單擊，對不起，我沒有閱讀問題到完整。我有另一個像下面列出的答案，

@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> ' 

     } 
});