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이 작동하지 않습니다. 나는 컴파일하는 것을 시도하지만, 그것을 할 수 없었다. 너 나 좀 도와 줄 수있어? 행동 목록에 하위 지시어 수 있습니다, 문제는 동일합니다. 나는 다음 <a href="{{action.href}}/{{row.id}}">을 Ctrl 키를 href:'#edit' 조치의 정의를 수정 할 수 있습니다 알고 있지만,이 지침의 다른 용도에에서 다른 PARAMS 될 수 있기 때문에 이것은 아주 좋은 해결책이 아니다 : http://plnkr.co/edit/O7hXXgQb0Num1xZs5Xrt?p=preview

참고 : 여기에

는 plunker 라이브 템플릿입니다 내가 행동에 전달할 수있는 $scope.data 항상 {{row.id}}

업데이트 예를 : 삭제

Answer 1

@Langdon에 대한 NG가 클릭 추가, 미안 읽기 didnt는 질문 전체. 아래에 나열된 답변이 있습니다.

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

     } 
});