0

'&'アイソレート スコープの での使用について混乱していrowClickます。以下のコードを見てください。コードレビューで、これはアンチパターンであり、'&'代わりに使用する必要があると言われましたが、それを行う方法の例は得られませんでした.

<div ng-controller="tableController as table">
    <row ng-repeat="row in table.rows" row-data="row" row-click="table.updateChart">
    </row>
</div>

.controller('tableController', [function() {
    this.rows = [
        { id: 'foobar', values: ['Chris', 'Kayti'] }
    ];

    this.updateChart = function(row) {
        alert('TODO: update row ' + row.id);  
    };
}])
.directive('row', [function() {
    return {
        restrict: 'E',
        scope: {
            rowData: '=',
            rowClick: '='
        },
        template: '<div class="row" ng-click="rowClick(rowData)">' +
                    '<span ng-repeat="cell in rowData.values">{{ cell }}</span>' +
                  '</div>'
    };
}])

( http://plnkr.co/edit/ZofcUQcPKQp4zeSNvoOe?p=previewを参照)

私はそれについて読んでいますが、まだ混乱しています。このコードをリファクタリングして使用する方法の例を教えて'&'ください。

4

2 に答える 2

1

ディレクティブの呼び出し元から、row-click属性を関数呼び出しとして渡します。

<row ng-repeat="row in table.rows" row-data="row" row-click="table.updateChart(row)"></row>

もちろん、スコープ定義を変更します。

    scope: {
        rowData: '=',
        rowClick: '&'
    },

そして難しいのは、&関数を呼び出すときに、呼び出し側からの各「正式な」引数がプロパティであるオブジェクトを渡すことです。うまく表現できません、申し訳ありません:) この場合：

template: '<div class="row" ng-click="rowClick({row:rowData})">' +
        '<span ng-repeat="cell in rowData.values">{{ cell }}</span>' +
    '</div>'

たとえば、呼び出しが:row-click="table.updateChart(x,y,z)"で、実際にやりたかった場合: row-click="table.updateChart(1,2,3)"、スコープ&関数を次のように呼び出す必要がありますscope.rowClick({x:1, y:2, z:3})。

そして分岐したプランク: http://plnkr.co/edit/9xVWXJmMLP8A2OgGTv7R?p=preview

于 2015-01-06T23:06:19.713 に答える
1

これは奇妙な構文であり、引数を渡す方法について十分に文書化されていない可能性があります。いくつかの変更を加える必要があります:-

テンプレートで&バインドを設定し、引数を名前付きのキーの値として渡します。たとえば、row次のようにしますng-click="rowClick({row: rowData})">。

return {
        restrict: 'E',
        scope: {
            rowData: '=',
            rowClick: '&'
        },
        template: '<div class="row" ng-click="rowClick({row: rowData})">' +
                    '<span ng-repeat="cell in rowData.values">{{ cell }}</span>' +
                  '</div>'
    };

ディレクティブを使用するときは、ディレクティブが内部で定義するものとインラインである必要がある引数の名前を設定します。つまり、次のように言いますrow。

row-click="table.updateChart(row)"

デモ

angular.module('app', []).controller('tableController', [
    function() {
      this.rows = [{
        id: 'foobar',
        values: ['Chris', 'Kayti']
      }];

      this.updateChart = function(row) {
        alert('TODO: update row ' + row.id);
      };
    }
  ])
  .directive('row', [
    function() {
      return {
        restrict: 'E',
        scope: {
          rowData: '=',
          rowClick: '&'
        },
        template: '<div class="row" ng-click="rowClick({row:rowData})">' +
          '<span ng-repeat="cell in rowData.values">{{ cell }}</span>' +
          '</div>'
      };
    }
  ])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="tableController as table">
  <row ng-repeat="row in table.rows" row-data="row" row-click="table.updateChart(row)">
  </row>
</div>

于 2015-01-06T23:03:47.877 に答える