Javascript AngularJS视图仅在屏幕交互后正确渲染

我有一个Angular应用程序，有两个控制器，每次服务器发送新信息时都会更新两个模型。为了澄清，相同的信息必须在相同的视图中更新，但范围不同。在标题中，使用“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&iacute;vel</a></li>
                <li><a ng-click="ficarVisivel()" ng-show="invisible">Vis&iacute;vel</a></li>
                <li><a ng-click="verUsuariosBloqueados()">Usu&aacute;rios Bloqueados</a></li>
                <li><a ng-click="sugerir()">Sugest&atilde;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&ccedil;&atilde;o: </strong><em id="minha-posicao">{{position}}</em><br/>
                <strong>Hor&aacute;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>

队列控制器

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

$scope.$on('positionChanged', function(e, data){
        $scope.position = data;
    })

问题是：我需要每次都更新队列中的用户位置，最好的位置是在标题中，然后，如果用户在队列屏幕中，它将自动更新，因为NavigationController发出positionChanged事件。一切正常，模型得到更新，但是

QueueController接收事件并正确地更新模型，而发送事件的NavigationController也正确地更新了模型（正如您在Chrome inspector中看到的），但是标头没有正确地呈现它。有趣的是，如果浏览器选项卡转到背景（浏览器最小化、更改屏幕等），或者如果我单击/触摸屏幕中的某个位置，所有内容都会完美呈现，正如您在下面看到的（只有更改的选项卡，然后返回）

---

我不知道这可能是什么原因，有人能帮我吗？

您应该使用$rootScope、$broadcast和$rootScope$on@ZackArgyle任何作用域都可以使用

$。在

上收听

rootScope

广播实际上，这不是问题所在。问题在于，只有当用户与屏幕交互时，才会呈现视图。