4

grid のような再利用可能なディレクティブを作成しようとしています。コントローラーでデータとアクション (編集、削除など) を定義したいと考えています。

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 は機能しません。コンパイルで遊んでみましたが、できませんでした。手伝って頂けますか？アクションがリストのサブディレクティブである可能性がありますが、問題は同じです。

プランカーのライブ テンプレートは次のとおりです: http://plnkr.co/edit/O7hXXgQb0Num1xZs5Xrt?p=preview

href:'#edit'注：ctrlでアクション定義を変更できることはわかっています<a href="{{action.href}}/{{row.id}}">が、これはあまり良い解決策ではありません。これは、このディレクティブの他の使用法では$scope.data、アクションに渡すことができる他のパラメーターになる可能性があるためです。{{row.id}}

更新された例: 削除用の ng-click を追加

4

2 に答える 2

2

@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> '
        }
});
于 2013-04-25T20:16:20.030 に答える