1

javascriptグリッドライブラリslickgridのディレクティブがあります。

http://plnkr.co/edit/KWZ9i767ycz49hZZGswB?p=preview

私がやりたいのは、選択した行をコントローラーに戻すことです。したがって、（'='を使用して）分離スコープを使用して、コントローラーとディレクティブの間で双方向バインディングを機能させたいと思います。

スコープ宣言を一切行わずにディレクティブを定義すると、すべてが機能します。

<slickgrid id="myGrid" data="names" selected-item="selectedItem"></slickgrid>

app.directive('slickgrid', function() {
  return {
  restrict: 'E',
  replace: true,
  //scope: {
  //  selectedItem: '='
  //},
  template: '<div></div>',
  link: function($scope, element, attrs) {
   ...
    var redraw = function(newScopeData) {
    grid.setData(newScopeData);
    grid.render();
};
$scope.$watch(attrs.data, redraw, true);

しかし、上記の行（app.jsの19〜21行目）のコメントを外すと、attrs.dataオブジェクトを監視している$scope。$watchがredrawを呼び出しているように見えますが、attrs.dataは未定義として渡されています。

私の分析は間違っている可能性がありますが、スコープを定義することがなぜこれを引き起こすのかわかりません。誰かがそれがなぜかもしれないのか説明できますか？

.nathan。

4

1 に答える 1

1

分離スコープを定義すると、ディレクティブ内の$ watchは、分離スコープでattrs.data評価されるものをすべて検索します。 attrs.data文字列に評価されるため、$watchは存在しない分離スコープをnames探します。$scope.names（分離スコープがない場合、ディレクティブはMainCtrlと同じスコープを使用し、$scope.namesそこに存在します。）

分離スコープを使用するには、渡す別の分離スコーププロパティを定義する必要がありますnames。

scope: {
  selectedItem: '=',
  data: '='
},
...
$scope.$watch('data', redraw, true);

HTMLは同じままにすることができます。

于 2013-03-15T20:03:36.780 に答える