1

独自のコントローラーを持ち、テンプレートがこのコントローラーにバインドされるディレクティブ (ParentDir) を作成しました。最初の親ディレクティブを「必要とする」独自のコントローラーを持つ別のディレクティブ (Child1) と通信します。以下は簡単な例です。

Module.directive("ParentDir", function () {
 return {
    templateUrl: '../ParentTemplate',
    restrict: 'AEC',
    scope: {       
        },
    controllerAs: 'parCtrl',
    bindToController: true,
    controller: ['$scope', function ($scope) {
        parCtrl= this;
        parCtrl.title = "PARENT 1 TITLE";
      }]}


 Module.directive("Child1", function () {
return {
    templateUrl: '../Child1Template',
    restrict: 'AEC',
    require: '^^ParentDir',
    scope: {},
    controllerAs: 'ch1Ctrl',
    bindToController: true,

    link: function ($scope, element, attrs, parCtrl) {
        $scope.parCtrl= parCtrl;
    },

    controller: ['$scope', function ($scope) {
           ch1Ctrl= this;
           ch1Ctrl.title = "CHILD 1 TITLE";
 }]}

親ディレクトリ html:

     <child1> </child1>

子 1 html:

  {{parCtrl.title}}
  {{ch1Ctrl.title}}

最後に、私の ParentDirective は次のように初期化されます。

  <div ng-animate-swap="trigger" class="swapclass">
         <parent-dir></parent-dir>
   </div>

特定のケースでスライドするには、親ディレクティブのテンプレート全体が必要です。これを必要としない他の場所でもディレクティブを使用し、そのまま使用できます。スライド アニメーションが必要な場合は、上記のように ng-animate-swap 内に配置します。問題は、スワップ トリガーが変更されるたびに、新しい parCtrl が初期化され、すべてがリセットされることです。

スワップが発生するたびにコントローラーを再初期化せずに、isolate スコープと独自のコントローラーを持つディレクティブで animate swap を使用するにはどうすればよいですか?

4

1 に答える 1

1

ご存じのとおり、ディレクティブは、指定された動作をその HTML 要素にアタッチするように Angular のコンパイラに指示する高レベルのマーカーです。ディレクティブが DOM に配置されると、Angular の$compileサービスはディレクティブ名とそのコードを照合し、正規化して実行します。

ただし、新しい要素を追加する前に、その要素を DOM からng-animate-swap 削除します。

これは、スワップごとにディレクティブが再コンパイルされ、アニメーションが発生するたびに新しい分離スコープが作成されることを意味します。

これに対する解決策は、アプリの機能、テンプレートの大きさ、およびアニメーションを実行する必要がある頻度 (またはアニメーションに伴うもの) によって異なります。

parCtrl.title1 つの解決策は、 and ch1Ctrl.title(またはその他の変数)を保持するスワップ アニメーションの外部に別のディレクティブを作成し、プロトタイプの継承を通じてその情報を子スコープに渡すことができるようにすることです。

    <swap-dir>
      <div ng-animate-swap="trigger" class="swapclass">
        <parent-dir></parent-dir>
      </div>
    <swap-dir>

これは、コントローラーを使用して行うこともできますが、おそらくはるかに簡単です。何を選択するかは、スコープ変数をどこから取得しているか、およびページにいくつの異なる要素があるかによって異なります。

ただし、独自のng-animate-swapスコープが作成されるため、これはうまくいくと思いますが、常に楽しい JavaScript 継承の悪ふざけがここでも問題を引き起こす可能性があります。

もう 1 つの解決策は、完全にスキップng-animate-swapして、通常の古い CSS トランジションでテンプレート要素をアニメーション化することです。

于 2016-06-23T18:01:20.000 に答える