3

この2つのディレクティブがあり、1つは互いにネストされています:

<envato class="container content-view-container" data-ng-cloak data-ng-hide="spinner">
    <items data-ng-repeat="items in marketplaces"></items>
</envato>

そして、これら 2 つのそれぞれは次のように定義されます。

Application.Envato.directive("envato", ["$timeout", function($timeout){

    var object = {

        restrict : "E",
        controller : "EnvatoAPIController",
        transclude : true,
        replace : true,
        templateUrl : "templates/envato-view.php",
        link : function(scope, element, attrs, controller) {

            console.log(scope);

            return controller.getLatestItems().then(function(data) {



                scope.marketplaces = angular.fromJson(data);
                scope.count = scope.marketplaces.length;

                var tst = angular.element(element).find(".thumbnails");

                /* $timeout(function() { scope.swiper = new Swipe(document.getElementById('swiper-container')); }, 5000); */                    
                scope.spinner = false;
            });

        }
    };

    return object;
}]);

Application.Envato.directive("items", function(){

    var iterator = [],
        object = {

            require : "^envato",
            restrict : "E",
            transclude : false,
            replace : true,
            templateUrl : "templates/envato-items-view.php",
            link : function(scope, element, attrs, controller) {

                iterator.push(element);

                if (iterator.length === scope.$parent.$parent.count) { console.log(iterator); };                                    
            }
        };

    return object;
});

上記のコードの多くは、より大きなアプリケーションの一部であるため、あまり意味をなさないかもしれませんが、私の質問に当てはまることを願っています. 私がやろうとしているのは、ディレクティブのスコープ プロパティをディレクティブenvatoから変更することですitems。反復があり、それがいつ完了したかを知りたいので、その反復中に追加された DOM 要素に対して別の操作を実行できます。

たとえばscope.swipe、ディレクティブ内に を定義しenvato、変更を監視するとします。ディレクティブitemsでは、いつ行われるかを監視してからng-repeat、上記で定義したスコープ プロパティを変更しますscope.swipe。これにより、ディレクティブ内の変更がトリガーされenvato、操作を実行できることがわかります。

十分に明確であることを願っています。そうでない場合は、より多くのコードを試すか、より具体的にしてみます。上記で説明したことをどのように達成できますか?

編集:console.log(angular.element(element.parent()).scope());ディレクティブ内で: を使用itemsすると、ディレクティブのスコープが得られることは知っていenvatoますが、より良い方法があるかどうか疑問に思っていました。

4

5 に答える 5

4

この種のディレクティブ間通信では、ディレクティブで呼び出すことができる API/メソッドをenvatoディレクティブに定義することをお勧めしますitems。 

var EnvatoAPIController = function($scope) {
    ...
    this.doSomething = function() { ... }
}

ディレクティブはitemsすでにディレクティブであるためrequire、envatoディレクティブのリンク関数で、items必要に応じて API を呼び出すだけです。

require : "^envato",
link : function(scope, element, attrs, EnvatoCtrl) {
   ...
   if(scope.$last) {
       EnvatoCtrl.doSomething();
   }
}

このアプローチの優れている点は、いつかディレクティブで分離スコープを使用することにした場合でも機能することです。

AngularJS ホームページのtabsandディレクティブは、この通信メカニズムを使用します。pane詳細については、 https://stackoverflow.com/a/14168699/215945を参照してください。John's Directive to Directive Communication videoも参照してください。

于 2013-03-04T18:51:26.813 に答える
1

うーん、あなたは自分自身を困難にしようとしているようです。ディレクティブでは、スコープ プロパティを設定しません。

var object = {
    restrict : "E",
    transclude : true,
    replace : true,
    scope: true,
    ...

scope: {} を設定すると、ディレクティブに完全に分離された新しいスコープが与えられます。

ただし、scope: true を設定すると、親を継承する完全に分離された新しいスコープがディレクティブに与えられます。

このメソッドを使用して、最上位の親ディレクティブにモデルを含め、すべての子ディレクティブをフィルター処理できるようにします。

于 2013-09-18T10:38:16.203 に答える
1

scope.$eval('count')atディレクティブを使用しitemて、Angular を解決してください。

于 2013-03-03T15:41:32.790 に答える
1

完了時に呼び出されるコールバックを探していると思いますng-repeat。それがあなたが望むものなら、私はフィドルを作成しました。http://jsfiddle.net/wjFZR/。

フィドルには多くの UI がありません。firebug コンソールを開いて、フィドルを再度実行してください。ログが表示されます。そのログは、ディレクティブng-repeatで定義されたの最後に呼び出されます。cell

$scope.rowDone = function(){ console.log($scope) }ng-repeatこれは、セル ディレクティブの完了時に呼び出される行ディレクティブで定義されたコールバック関数です。

このように登録されます。

<cell ng-repeat="data in rowData" repeat-done="rowDone()"></cell>

免責事項: 私も angularjs の初心者です。

于 2013-03-04T01:06:05.667 に答える
0

私はマークの答えが大好きですが、最終的に次のように要素ディレクティブのスコープを rootScope に保存するための属性ディレクティブを作成しました。

myApp.directive('gScope', function(){
    return {
        restrict: 'A',
        replace: false,
        transclude: false,
        controller: "DirectiveCntl",
        link: function(scope, element, attrs, controller) {
            controller.saveScope(attrs.gScope);
        }
    }
});

...

function DirectiveCntl($scope, $rootScope) {
    this.saveScope = function(id) {
        if($rootScope.directiveScope == undefined) {
            $rootScope.directiveScope = [];
        }
        $rootScope.directiveScope[id] = $scope;
    };
}

...

<span>Now I can access the message here: {{directiveScope['myScopeId'].message}}</span>
<other-directive>
    <other-directive g-scope="myScopeId" ng-model="message"></other-directive>
</other-directive>

注: これにより、さまざまなディレクティブすべてからデータを簡単に収集できますが、ページでメモリ リークが発生しないように、潜在的なスコープの山が適切に管理されていることを確認する必要があることに注意してください。特に、ng-view を使用して 1 ページのアプリを作成している場合。

于 2013-08-29T20:36:50.573 に答える