$ асинхронно, необходимо быть синхронным

Question

У меня есть контроллер, который имеет ряд $ 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>' 
    } 
}); 

Проблема, которую я имею, что на странице загрузки, в $ трансляции заголовка и, как представляется, вызывается, прежде чем ясность будет завершена.

---

UPDATE:

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

Всякий раз, когда на home.html, директива будет скрывать - правильно. Всякий раз, когда на cart.html, директива покажет - правильно.

Чтобы увидеть проблему, нажмите на корзину ... Нажмите кнопку, чтобы увеличить счетчик .. Затем вернитесь домой, а затем обратно в корзину ... счетчик не сбрасывается до 0

Answer 1

Как уже упоминалось в моем комментарии выше, проблема заключалась в том, что scope.Total внутри «clear» был/недоступен в других версиях .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>' 
    } 
}); 

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