AngularJS视图在屏幕交互后正确呈现

时间:2013-12-05 01:54:42

标签: javascript angularjs angularjs-scope

我有一个带有两个控制器的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&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>

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事件。一切都工作正常,模型得到更新,但是......

enter image description here

QueueController接收事件并正确更新模型,NavigationController,发送事件的位置,也正确更新模型(正如您在Chrome检查器中看到的那样),但标题无法正确呈现。有趣的是,如果浏览器选项卡转到后台(浏览器最小化,更改屏幕等等)或者如果我单击/触摸屏幕中的某个位置,一切都会完美呈现,如下所示(仅更改选项卡然后获得回)。

enter image description here

我不知道造成这种情况的原因是什么,任何人都可以帮助我吗?

0 个答案:

没有答案