AngularJS - 范围更改后视图不更新答案

【问题标题】：AngularJS - view not updating after scope changeAngularJS - 范围更改后视图不更新
【发布时间】：2017-10-26 12:15:51
【问题描述】：

我正在通过 Firebase 处理一些数据，并且由于某种原因，当服务器上的值发生更改时，范围在我的控制台中得到更新，但是角度视图没有更新。

我尝试了一些不同的方法，包括将对范围的引用包装在 $timeout 和 $apply 中，但仍然没有解决方案。我曾多次使用 Angular，但以前从未遇到过这种行为。应用中只有一个控制器。

app.controller('someCtrl', function($scope, $timeout){

    $scope.publishedItems =[];
    var fbRef = firebase.database().ref('stories/' + storyId + "/correspondents").orderByChild('published').equalTo(true);
    fbRef.on('value', function(snapshot) {
    //update scope

    $scope.publishedItems = snapshot.val();

    console.log($scope.publishedItems)// this logs the correct data, however the markup is not changing

});

html

 <div ng-controller="someCtrl">
      <div ng-repeat="item in publishedItems">
        {{item}}
      </div>
 </doc>

已解决

所以经过一些调试后，我发现我有一个在 Angular 应用程序之外运行的函数，它向 dom 附加了一些标记，这会干扰 Angulars 的摘要循环。

现在按预期工作

【问题讨论】：

你能创建codepen.io 的例子吗？和 $scope.$apply 可能会帮助你
@ShirishPatel 我添加了一个 sn-p 虽然我没有公开我的 firebase ref。
你可以在publishedItems上使用$watchCollection()，它会开始观察数组的每一个变化。

标签： angularjs firebase firebase-realtime-database

【解决方案1】：

假设 snapshot.val() 返回一些你需要触发摘要循环以确定更改的内容，因为 firebase 回调是在 angular 之外执行的

fbRef.on('value', function(snapshot) {
    $scope.$apply(function(){
      $scope.publishedItems = snapshot.val();
    })
})

【讨论】：

嗨，是的，我试过了，结果一样。视图中仍未更新。
这很奇怪，您肯定需要调用 $apply，尝试使用完整代码发布指向 plunkr 的链接
是的，从未经历过。是的，我将不得不用另一个 firebase 实例创建一个 plunkr。
当然我创建了一个 plunked 并且它有效。 plunkr 之间唯一的主要区别是数据是从另一个来源操纵的……这会有所作为吗？
所以我刚刚重新启动，一切都按预期工作.. 奇怪

【解决方案2】：

你可以试试下面的代码

var app = angular.module('myApp', []);
app.controller('someCtrl', function ($scope, $timeout) {

    $scope.publishedItems = [];
    $scope.$watchCollection('publishedItems', function(newCol, oldCol, scope) {
        console.log(newCol, oldCol, scope);
    });
    var fbRef = firebase.database().ref('stories/' + storyId + "/correspondents").orderByChild('published').equalTo(true);
    fbRef.on('value', function (snapshot) {
        var pubItems = snapshot.val();
        //update scope

        $scope.publishedItems = pubItems;

        console.log($scope.publishedItems)// this logs the correct    data, however the markup is not changing

    });
});

【讨论】：

【解决方案3】：

好像你需要更新你的绑定，所以你需要使用$scope.$apply()

app.controller('someCtrl', function($scope, $timeout){

    $scope.publishedItems =[];
    var fbRef = firebase.database().ref('stories/' + storyId + "/correspondents").orderByChild('published').equalTo(true);
    fbRef.on('value', function(snapshot) {
    //update scope

    $scope.publishedItems = snapshot.val();



    console.log($scope.publishedItems)// this logs the correct data, however the markup is not changing

});
   $scope.$apply();
});

【讨论】：

嗨，是的，我试过了，结果一样。视图中仍未更新。
我添加了一个 sn-p 虽然我没有公开我的 firebase ref.. 但你至少可以看到我遇到问题的地方。
@gregdevs 您在脚本末尾缺少}
谢谢，已解决..虽然还是有这个问题。