当前位置: 首页 > 面试题库 >

angular.js:模型更新不会触发视图更新

萧亦
2023-03-14
问题内容

我目前正在使用基于Web的Twitter客户端,因此我使用了angular.js,node.js和socket.io。我通过socket.io将新的推文推到我的客户端,服务在其中等待新的推文。当一条新的推文到来时,该服务通过$
broadcast发送事件。

在我的控制器中是一个事件侦听器,其中传入的tweet在单独的函数中进行处理。此功能只是将新的推文推入我的推文范围。

现在,我的问题专家认为我的观点没有更新,但是我可以看到我的范围不断扩大。也许你们有一个主意,我该如何解决?

另外我的代码:

服务:

(function () {
    app.factory('Push', ['$rootScope', function ($rootScope) {
        socket.on('new-tweet', function (msg) {
            $rootScope.$broadcast('new-tweet', msg);
        });
    }]);
}());

控制器:

(function () {
    app.controller("StreamCtrl", function StreamCtrl ($scope, $rootScope, $http, Push) {
        $scope.tweets = [];

        $http
            .get('/stream')
            .then(function (res) {
                $scope.tweets = res.data;
            });

        $scope.addTweet = function (data) {
            $scope.tweets.push(data);
            console.log($scope.tweets);
        };

        $rootScope.$on('new-tweet', function (event, data) {
            if (!data.friends) {
                $scope.addTweet(data);
            }
        });
    });
}());

整个项目在这里:https :
//github.com/hochitom/node-twitter-client


问题答案:

在addTweet中添加以下代码行即可解决问题

$scope.addTweet = function (data) {
            $scope.tweets.push(data);
            $scope.$apply();
            console.log($scope.tweets);
        };


 类似资料:
  • 问题内容: 我已经阅读了有关此问题的主题,例如:[\AngularJS中未更新视图,\但我仍然不明白如何在我的简单示例中应用它。 我有这个功能: 当代码中的其他地方更新时(用户单击,交互,发送XHR请求时),它不会更新我的视图。我知道我需要使用$apply做些事情,但我不知道在哪里以及如何做。 有人可以向我解释如何针对这个简单用例解决此问题吗? 我的模型看起来像这样(如果这个问题是必要的)-它里面

  • 问题内容: 添加评论时,我试图使angular.js视图本身进行更新。我的代码如下: 范围在输入时更新: 调试$ scope.currentItem显示注释已添加到其中,但是视图未显示新注释。我怀疑$ scope仅在其第一级被监视,这就是为什么视图不更新的原因。是这样吗?如果可以,我该如何解决? 解决方案:正如Ajay在下面的回答中所建议的那样,我将数组推入包装为apply函数,如下所示: 问题答

  • 问题内容: 当我从纯JavaScript更改输入元素的值时,则不会更新角度模型。有什么方法可以通过在更改后手动触发一些事件来触发更新吗? 完整的示例可以在plunkr上找到。单击按钮后,我希望会以某种方式更新。有办法吗? 问题答案: 您不应该这样做(除非用于 测试 ,但即使如此,也请考虑量角器)。以这种方式与angular交互是一个坏主意。但是,如果必须,这是您的操作方法。 一种不同的中间方式是

  • 问题内容: 使用FetchRequest包装器,并在视图内部更改获取结果的数据。该功能在视图首次加载时起作用,该视图随所做的每个更改而更新。 问题是,如果我离开视图导航并再次返回,则获取请求数据的更改将停止刷新视图。查看更改的唯一方法是导航并再次返回。 我正在打印获取请求,并且对数据所做的更改正在起作用,这说明了为什么如果我再次导航回去,视图将正确显示,但是当视图上的数据更改时,视图没有刷新。 这

  • 问题内容: 我试图弄清楚Angular的工作原理,并在模型更改时无法更新视图。 的HTML JS http://jsfiddle.net/N2G7z/ 有任何想法吗? 问题答案: 正如上面提到的Ajay beniwal一样,您需要使用Apply来开始消化。

  • 问题内容: 我用来加载图像。值是从一些范围变量加载的,如下所示: 我的问题是,当我运行时,它会使属性为空,但不会在属性中反映出来。因此,我不断看到需要空占位符的图像。 我该如何处理? 问题答案: 这是ngSrc和ngHref指令的预期行为。这些指令仅支持识别新路径,但是当路径不可用时,这些指令将以静默方式退出(我在这里看到一个拉取请求。)。 因此,当图像变量不再可用时,可能的解决方法是将ngSho