我有一个带有两个控制器的Angular App,每次服务器发送新信息时都会更新两个模型。为了澄清,必须在同一视图中更新相同的信息,但必须在两个不同的范围内更新。在Header中,使用“NavigationController”和myQueue.html页面,使用QueueController在应用程序的每个页面中显示。
myQueue.html
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div class="navigation" ng-controller="NavigationController">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle bh-logo-top"><span></span></a>
</section>
<section class="middle tab-bar-section">
<ul id="top-menu" class="clearfix">
<li id="msg-icon" ng-click="verMensagens();"><span></span></li>
<li id="fav-icon" ng-click="verFavoritos();"><span></span></li>
<li id="fila-icon" ng-click="visualizarFila(estaEmFila);"><span>{{queuePosition}}</span></li>
</ul>
</section>
<section class="right-small">
<a href="#/success/{{user.user_id}}" id="bh-search-icon"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label id="aside-header"></label></li>
<li><a>{{user.nome_frequentador}}</a></li>
<li><a ng-click="verMensagens()">Mensagens</a></li>
<li><a ng-click="verFavoritos()">Favoritos</a></li>
<li><a ng-click="ficarInvisivel()" ng-show="visible">Invisível</a></li>
<li><a ng-click="ficarVisivel()" ng-show="invisible">Visível</a></li>
<li><a ng-click="verUsuariosBloqueados()">Usuários Bloqueados</a></li>
<li><a ng-click="sugerir()">Sugestão</a></li>
<li><a ng-click="logout()">Sair</a></li>
</ul>
</aside>
</div>
<section id="main-container-minha-fila">
<div class="row" id="estabelecimento-info">
<div class="columns small-3 left" id="estabelecimento-logo">
<img src="http://homologa.boadahora.com.br{{fila.logo}}"></img>
</div>
<div class="columns small-9" id="fila-info">
<h6>{{fila.estabelecimento.nome}}</h6>
<h6>{{fila.nome_fila}}</h6>
<strong>Tempo de espera: </strong><span>{{fila.tempo_estimado}}</span>
</div>
</div>
<div class="user-list-container row">
<button id="deixar-fila" class="button alert radius" ng-click="deixarFila()">Deixar Fila</button>
</div>
<div class="row" id="minha-entrada">
<h6 id="nome-entrada-frequentador">{{fila.frequentador}}</h6>
<div id="minha-entrada-info">
<strong>Posição: </strong><em id="minha-posicao">{{position}}</em><br/>
<strong>Horário de Entrada: </strong><em>{{fila.horario_entrada}}</em>
<br/>
<span ng-show="fila.respondeu">
<strong>Token: </strong><em>{{token}}</em>
</span>
</div>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
NavigationController
(function updateQueue(){
$http.post(url,dataQuery{
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
if(data.posicao){
if($scope.queuePosition!== data.position){
$scope.estaEmFila = true;
$scope.fila = data.fila;
$scope.$emit('positionChanged', data.posicao);
}
$scope.queuePosition= data.position;
$timeout(updateQueue, 5000);
}else{
$scope.queuePosition= 0;
$scope.estaEmFila = false;
}
}).error(function(data, status, headers, config){
console.log(data)
});
})();
QueueController
$scope.$on('positionChanged', function(e, data){
$scope.position = data;
})
问题是:我需要每次更新队列中的用户位置,并且最好的位置是在标题中,然后,如果用户在他的队列屏幕中,它将自动更新,因为NavigationController发出positionChanged事件。一切都工作正常,模型得到更新,但是......
QueueController接收事件并正确更新模型,NavigationController,发送事件的位置,也正确更新模型(正如您在Chrome检查器中看到的那样),但标题无法正确呈现。有趣的是,如果浏览器选项卡转到后台(浏览器最小化,更改屏幕等等)或者如果我单击/触摸屏幕中的某个位置,一切都会完美呈现,如下所示(仅更改选项卡然后获得回)。
我不知道造成这种情况的原因是什么,任何人都可以帮助我吗?