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

发布于 2022-09-04 10:12:49 字数 1458 浏览 14 评论 0

我们是使用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>       

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

如梦初醒的夏天 2022-09-11 10:12:49

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文