javascript - angular中的页面上显示数据为什么要鼠标移入事件才能触发？鼠标移入事件只是控制一个提示框的显示和隐藏，和页面数据没有关系呀？

问题描述

问 题

我们是使用angular框架来开发，当我使用ajax模拟请求本地的json数据时，没有任何问题，页面都能渲染数据，正常展示。由于后台是使用Phoenix框架开发，所以我们的代码都要放入该框架中，这时候数据来源就是websocket,我在控制台都能打印出从后台获取的json数据，但是页面上却没有任何显示，当我无意中鼠标移入一个div（该div就是一个标题，绑定一个ng-mouseenter指令，仅用于控制一个提示框的显示和隐藏）的时候，整个页面的数据瞬间都渲染出来，这个div和页面数据八竿子打不着的事情，怎么能让整个页面的数据渲染出来啦？后来我继续查找原因，一个背景图片绑定一个ng-click指令，当我点击这个背景图片的时候，页面上所有的数据居然也能正常显示，但是我刷新页面的时候，所有渲染的数据又全部都消失，只有样式。请大神指点？
以下是一小部分代码：
JS:

    channel.join().receive("ok", function (resp) {
        // console.log(resp,5252);
    }).receive("error", function (resp) {
        console.log("Unable to join", resp,9999);
    });
    channel.push("get_today_data_summary", {});

    channel.on("get_today_data_summary", function (payload) {
        // 今日数据总览开始
    $scope.items=payload.data;
    
    });

    

HTML:
<div class="top-box-parent">

                <div class="top-box">
                    <div class="top-box-first">
                        <p class="top-box-title">正在咨询人数</p>
                        <p class="top-box-data">{{items.consulting_user}}</p>
                    </div>
                    <div class="top-box-second">
                        <p class="top-box-second-p">当前在线客服数<span class="top-box-second-spn">{{items.online_waiter}}</span></p>
                    </div>
                </div>
            </div>       

解决方案

应该是未触发angular的脏数据检查。
$scope.$apply();或者$scope.$digest在你的修改数据语句之后加上这个,手动触发。
点击更新视图的原因跟简单，因为angular的指令都会触发脏数据检查，ng-click就是指令。

这篇关于javascript - angular中的页面上显示数据为什么要鼠标移入事件才能触发？鼠标移入事件只是控制一个提示框的显示和隐藏，和页面数据没有关系呀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！