$廣播異步工作，需要同步

Question

我有一個控制器，它有一個$ rootScope。$廣播，它更新了一個指令的內容。

第一個$ 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>' 
    } 
}); 

我遇到的問題是，在頁面加載，標題$廣播並且在清除完成之前總計似乎正在被調用。

---

UPDATE：

Plunker：http://plnkr.co/edit/o7wEFyIGh0284ZAc9VnS?p=preview

每當在home.html的，該指令將隱藏 - 正確的。 無論何時在cart.html上，指令都會顯示 - 正確。

要看到問題，請單擊上車...點擊按鈕，計數器加一。然後回到家裏，然後再返回到車......計數器不會重置爲0

Answer 1

正如我在上面的評論中提到的那樣，問題就是那個範圍。總的來說，'明確'在其他.on casts中是無法訪問的。因此，一個全局變量已經宣佈和每個廣播內更新：

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>' 
    } 
}); 

見Plunker：http://plnkr.co/edit/2Xx99RzvQtaD9ntiod0d?p=preview

Answer 2

您應該使用服務對於這樣的同步：

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>' 
    } 
    });