1

私は次のdomを持っています。

   <td grid-item ng-repeat='col in columnDefs' ng-click="actions[col.field]"></td>

これはディレクティブでラップされます:

angular.module('myApp').
directive('gridItem', function () {
    return {
        restrict: 'A',
        templateUrl: 'views/grid_item.html',
        link: function postLink(scope, element, attrs) {
            if (scope.$eval(element.attr('ng-click'))) {
                element.addClass('clickable');
            }
        }
    };
});

わかりやすくするために、アクションは次の形式のオブジェクトです。

   {some_column: '', some_other_column: 'myFunction(arguments)', some_third_column: 'myOtherFunction(arguments)'}

特定の反復に応じて、、、などになりますcol.field。some_columnsome_other_column

これは正常にバインドされ、クリック可能なクラスが ng-click が空白でない要素に追加されます。

ただし、コントローラーのメソッドは呼び出されません。どうしてこれなの？また、文字列表現に基づいて関数に動的にバインドするにはどうすればよいですか?

activity[col.field] (この場合) の文字列表現は次のとおりfetch('activity', $parent.$index)です。

controller:コントローラーは、親ディレクティブのキーを介して定義されているため、確実にスコープ内にあります（これが関連しているかどうかは不明です）分離スコープ。

注: ハッキングして機能させる方法を見つけました。

      element.on('click', function(){
        scope.$eval(scope.$eval(attrs.ngClick));
      });

明らかに、それは理想的とは言えない解決策です...

4

1 に答える 1

1

actions[col.field]に変更する必要があると思いますactions(col.field)。これはあなたのディレクティブの私のテストコードです:

<div lang="en" ng-app="App" ng-controller="MainCtrl">
    <table>
        <td grid-item ng-repeat='col in columnDefs' ng-click="actions(col.field)"></td>
    </table>
</div>

app.directive('gridItem', function ($compile) {
    return {
        restrict: 'A',
        template: '<div>blah</div>',
        link: function postLink(scope, element, attrs) {
            if (scope.$eval(element.attr('ng-click'))) {
                element.addClass('clickable');
            }
        }
    };
});

function MainCtrl($scope) {
    $scope.columnDefs = ['a', 'b', 'c'];

    $scope.actions = function (field) {
        console.log(field);
    }
}
于 2013-07-17T00:25:04.277 に答える