1

コンポーネント スタイル ディレクティブを記述して、Angular コードにコンポーネント アプローチを採用しようとしていますが、問題が発生しました。以下は、ページの私のhtmlテンプレートです。AngularStrap tabs ディレクティブ を使用していることに注意してください。

私が抱えている問題は、woSamplesSummary.materialsCount が work-order ディレクティブのすぐ下 (タブ ペインの範囲外) で定義されていないことですが、タブ ペイン ディレクティブではタブ タイトルの一部として (タブ ペイン内で) 正しく表示されます。範囲）。基本的な問題は、別の分離されたスコープ ディレクティブ内でディレクティブを使用するときに、ページ上でデータを共有する方法ですか?

<work-order wo-id="{{woId}}"></work-order>
<div>Materials Count: {{woSamplesSummary.materialsCount}}</div>

<!--- TABS ------>
<div ng-show="woId" bs-tabs>

    <!--- MATERIALS --->
    <div bs-pane title="Materials ({{woSamplesSummary.materialsCount}})" id="materials">

        <work-order-samples 
            wo-id="{{woId}}" 
            wo-samples-summary="woSamplesSummary" >
        </work-order-samples>
    </div>

    <!--- additional tabs not shown --->

</div>

これが私の work-order-samples ディレクティブです。ほとんどのロジックを削除しましたが、双方向バインディングを使用して woSamplesSummary をセットアップし、プロパティをコントローラーにバインドしたことがわかります。これはすべて正しく機能しており、$scope の使用をやめることができました。

.directive('workOrderSamples', function () {
    return {
        restrict: 'E',
        replace: 'false',
        templateUrl: 'myTemplate',
        scope: { },
        controllerAs: 'wosamplesCtlr',
        bindToController: {
            woId: '@',
            woSamplesSummary: '='
        },
        controller: function ($scope, $element, $attrs, myModel) {
            var self = this;
            $attrs.$observe('woId', function(woId) {
                workOrderSamples.find(conditions).then(function () {
                    self.woSamples          = workOrderSamples;
                    self.woSamplesSummary   = {
                        batchCount: workOrderSamples.batches.length,
                        materialsCount: workOrderSamples.list.length }
                });
            });
        }
    };
})

問題は、tabs ディレクティブが分離されたスコープを作成しているように思われるため、現在のタブの外でデータを使用できるようにすることができません。

他の分離されたスコープ ディレクティブ内でデータが使用されている場合、ディレクティブからデータを利用できるようにする方法が必要なようです。私は多くの異なるアプローチを試みましたが、成功しませんでした。ディレクティブ内で $rootScope に値を割り当てることはできますが、適切な解決策ではありません (たとえば、このディレクティブをページで複数回使用したい場合)。

何か案は？

4

1 に答える 1

1

Angular には 2 つの通信方法があります。その一つがサービスの利用です。もう 1 つは、$broadcast と $emit/$on を使用する方法です。

$broadcast、$emit、$on を使用した Angular カスタム イベント。

あなたのディレクティブでは、次から始めます。

$rootScope.$broadcast('myEvent', data)

次に、受信側で：

$rootScope.$on('myEvent', function(e, args){
   // do stuff
});

メモリ リークを避けるために、$rootScope リスナーの登録も解除する必要があります。これを行う方法は、$on が返す関数を呼び出して、スコープの $destroy イベント中に適用することです。

var cleanfunction = $rootScope.$on('showLogin', showLoginDialog());

$scope.$on('$destroy', function(){
  cleanfunction();
})
于 2015-11-02T20:57:34.657 に答える