1

複数の子コンポーネントを含むコンポーネントを作成しようとしています。チームの他の開発者がカスタム検索フォームを作成するために使用できるディレクティブのコレクションを作成しています。たとえば、次のようなマークアップを作成します。

<search-panel name="myCustomSearch">
    <search-field name="dates" type="dateRange"></search-field>
    <search-field name="categories" type="categorySelector" data="{{categories}}"></search-field>
</search-panel>

検索パネル ディレクティブといくつかの検索フィールド ディレクティブがあります。検索パネルはコンテナーとして機能し、検索フィールドはそれぞれ特定のタイプのフィールド (日付範囲、先行入力、カテゴリー セレクターなど) を提供します。各検索フィールドにはスコープ内に値プロパティがあり、すべての子検索フィールドのキー、値コレクションを含むプロパティを親検索パネル ディレクティブにスコープ内に持たせる方法を見つけようとしています。

両方のディレクティブが正しくレンダリングされていますが、検索パネルにすべての子コンポーネントを認識させる/アクセスさせる方法がわかりません。

4

4 に答える 4

2

search-fieldを使用して、ディレクティブでsearch-panelコントローラーを要求できますrequire:'^searchPanel'

次に、リンク関数でそのコントローラーへのリンクを取得するため、これらのディレクティブは自分自身を配列に追加できます (各検索フィールドには独立したスコープがあると仮定します)。

link: function(scope, elem, attrs, spCtrl) {
  spCtrl.fields.push({name: attrs.name, scope: scope});
}

(もちろん、スコープ全体ではなく、いくつかのオブジェクトを追加して、変更を監視し、そのオブジェクトの値フィールドを更新することもできます。

于 2013-04-22T19:39:40.750 に答える
0

ここでの基本的な考え方は、2 つの間で共通のコントローラーを作成し、ディレクティブ リンクでそれらをリンクすることです。

ディレクティブを作成するとき、コントローラーを次のように 4 番目のパラメーターに渡すことができます。

app.directive('myDirective', function(){
  return {
    scope: true,
    link: function postLink( scope, element, attrs, ctrls ){
      //check ctrls for common link
    }
  }
}

angularui/bootstrap プロジェクトで作成された優れた例は、タブ ディレクティブです。これには、どこから始めればよいかの例として、それらをリンクする共通のコントローラーがあります。

お役に立てれば。

于 2013-04-22T19:45:50.250 に答える
0

Mark Rajcok によるスタックオーバーフローの良い回答があります。

親ディレクティブ コントローラーを必要とする AngularJS ディレクティブ コントローラー?

この非常に明確な jsFiddle へのリンク: http://jsfiddle.net/mrajcok/StXFK/

<div ng-controller="MyCtrl">
    <div screen>
        <div component>
            <div widget>
                <button ng-click="widgetIt()">Woo Hoo</button>
            </div>
        </div>
    </div>
</div>

JavaScript は jsFiddle にあります。

于 2013-04-23T03:21:01.050 に答える
0

複合コンポーネント (複数のトランスクルージョン ディレクティブ) の私の実装は、次のアイデアに基づいています。

  • 1 つのディレクティブで $transclude 子コンポーネントをキャプチャする
  • この子コンポーネントを別のディレクティブで出力する

ライブデモhttp://nickholub.github.io/angular-composite-component/#/

デモ ソース コードhttps://github.com/nickholub/angular-composite-component

ディレクティブ ソース コードhttps://github.com/nickholub/angular-composite-component/blob/master/app/directive/angular-composite-component.js

<div cs-composite>
    <div cs-section="header">
        Composite Component Header
    </div>
    <div cs-section="footer">
        Composite Component Footer
        <div>Random Value: {{randomValue}}</div>
        <div>Percentage: {{percentage}}%</div>
    </div>
</div>

コンテンツをキャプチャするディレクティブ

.directive('csSection', function () {
    return {
      transclude: 'element',
      priority: 100,
      require: '^csComposite',
      link: function (scope, element, attrs, ctrl, $transclude) {
        var directiveTransclude = {
          id: attrs.csSection,
          transclude: $transclude,
          element: element
        };

        ctrl.registerTransclude(directiveTransclude);
      }
    };
  })

コンテンツを出力するディレクティブ

.directive('csTransclude', function () {
    return {
      transclude: true,
      link: function (scope, element, attrs) {
        var id = attrs.csTransclude;
        var directiveTransclude = scope.transcludes[id];
        if (directiveTransclude) {
          var selectedScope = scope.$new();
          directiveTransclude.transclude(selectedScope, function (clone) {
            element.append(clone);
          });
        }
      }
    };
  })
于 2014-07-10T19:05:48.987 に答える