3

Angular初心者はこちら。ディレクティブ、スコープ、トランスクルージョンなどに頭を悩ませようとしています。

これが私が達成しようとしていることです-セル内の各テーブルは、そのセル内の値に基づいて色分けする必要があります（bgcolorの変更または特定のCSSクラスの追加）。厄介なのは、セルに裸の値がないことです。セルには他のビットとつまらないものが一緒にあります。したがって、セル内にカスタムHTMLを追加できるようにしたいと思います。

テンプレートは次のようになります。

<span color-codify="{'max' : object.max, 'value' : object.value}" ng-transclude>
  {{ object.value }}
  <a href="#">Edit</a> | <a href="#">Delete</a>
</span>

私のディレクティブは次のようになります。

myModule.directive('colorCodify', function() {
  return {
    restrict: 'A',
    transclude: 'true',
    'link' : function(scope, element, attrs, controller) {
      var opts = scope.$eval(attrs.colorCodify);
      console.log(opts); // THIS DISPLAYs {max: undefined, value: undefined} 
    }
  }
});

驚くべき部分は、要素{{ object.value }}内が<span>正しくレンダリングされていても、ディレクティブに適切に渡されていないことです。しかし、私が参照すると、$parentそれは正しく動作します。例：

<span color-codify="{'max' : $parent.object.max, 'value' : $parent.object.value}" ng-transclude></span>

どうしたの？

4

1 に答える 1

4 
<span color-codify="{'max' : object.max, 'value' : object.value}" ng-transclude>
  {{ object.value }}
  <a href="#">Edit</a> | <a href="#">Delete</a>
</span>

。

myModule.directive('colorCodify', function() {
  return {
    restrict: 'A',
    transclude: 'true',
    scope: {getOpts: "&colorCodify"},
    'link' : function(scope, element, attrs, controller) {
      var opts = scope.getOpts();
      console.log(opts);
    }
  }
});

詳細については、http：//docs.angularjs.org/guide/directiveのディレクティブ定義オブジェクトの部分を確認してください。

$ parentについて編集：

スコープがAngularでどのように機能するか（スコープが互いにどのように継承され、それらの継承されたプロパティをどのようにオーバーライドするか）についてもっと読む必要があると思います。これは、angularjsの最も重要な側面の1つです。リンクをたどって、入手するまで何度も読むことをお勧めします。

ngScopeドキュメントリファレンス
開発者ガイド
ボーナス（angularjsチームからのビデオ、angularjsのベストプラクティスについて説明）：
Youtube

于 2013-01-22T07:12:03.900 に答える