-2

ディレクティブの内容を更新する多数の $rootScope.$broadcast を持つコントローラーがあります。

最初の $rootScope.$broadcast はすべてのコンテンツ/データをクリアし、もう一方はデータを取り込みます。

app.controller('MyController', function($scope, header) {

    $rootScope.$broadcast('clear');
    $rootScope.$broadcast('title', header.title);
    $rootScope.$broadcast('total', header.total);

});

注: ヘッダーは $stateProvider から解決されます。例:

.state('index', {
        url: '/index',
        templateUrl: 'home.html',
        controller: 'MyController',
        resolve: {
            header:  function() {
                return {
                    title : 'Welcome to Home',
                    total : 6
                };
            }
        }
    })

指令：

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {},
        link: function(scope, element, attrs) {
            scope.$on("clear", function(event, val) {
                scope.Title = '';
                scope.Total = 0;
            });               
            scope.$on("title", function(event, title) {
                scope.Title = title;
            });
            scope.$on("total", function(event, total) {
                scope.Total = total;
            });
        },
        template:
            '<section>' +
                '<p>{{Title}} - {{Total}}</p>' +                        
            '</section>'
    }
});

私が抱えている問題は、ページの読み込み時に、クリアが完了する前にタイトルと合計の $broadcast が呼び出されているように見えることです。

アップデート：

プランカー: http://plnkr.co/edit/o7wEFyIGh0284ZAc9VnS?p=preview

home.html では常に、ディレクティブは非表示になります - 正しいです。cart.html ではいつでも、ディレクティブが表示されます - 正しいです。

問題を確認するには、カートをクリックしてください... ボタンをクリックしてカウンターを増やします..ホームに戻り、カートに戻ります.カウンターは 0 にリセットされません

4

2 に答える 2

1

次のようにサービスを同期に使用する必要があります。

app.controller('MyController', function($scope, header, myDirectiveManager) {
  myDirectiveManager.getPromise().then(function(directive){
    directive.clear();
    directive.setTitle(header.title);
    directive.setTotal(header.total);
 });

});

サービス

app.service('myDirectiveManager',function($q){
   var deferred = $q.defer();
   this.getDeffer = function(){
     return deferred;
   };
   this.getPromise = function(){
      return deferred.promise;
   }
});

指令

app.directive('myDirective', function() {
return {
    restrict: 'A',
    replace: true,
    scope: {},
    controller: function($scope, myDirectiveManager) {
        var fasade = {
           clear: function(event, val) {
            scope.Title = '';
            scope.Total = 0;
           },
           setTitle: function(event, title) {
            scope.Title = title;
           },
           setTotal: function(event, total) {
            scope.Total = total;
           }

        };
        myDirectiveManager.getDeffer().resolve(fasade);
    },
    template:
        '<section>' +
            '<p>{{Title}} - {{Total}}</p>' +                        
        '</section>'
    }
  });
于 2015-08-27T14:36:07.870 に答える
0

上記の私のコメントで述べたように、問題は、「クリア」内の scope.Total が他の .on キャストでアクセスできる/アクセスできないことでした。そのため、グローバル変数が宣言され、各ブロードキャスト内で更新されています。

app.directive('myDirective', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {},
    link: function(scope, element, attrs) {

      var localTotal = null;

      scope.$on("clear", function(event) {
        scope.Title = '';
        scope.Total = 0;
        localTotal = scope.Total;
      });
      scope.$on("showDirective", function(event, show) {
        scope.showDirective = show;
      });
      scope.$on("total", function(event, total) {
        if (localTotal !== 0) {
          console.log("in IF");
          scope.Total = total;
        }
        else {
          scope.Total = localTotal;
        }
      });
      scope.$on("title", function(event, title) {
        scope.Title = title;
      });
    },
    template: '<section>' +
      '<p ng-if="showDirective">{{Title}} - {{Total}}</p>' +
      '</section>'
  }
});

プランカーを参照してください: http://plnkr.co/edit/2Xx99RzvQtaD9ntiod0d?p=preview

于 2015-08-28T08:20:56.490 に答える