Question

我在Firebase应用程序中使用AngularJS，我有一个函数，我在其中进行一些内连接以获取一些数据。更多details here。从firebase api获得响应后，我创建了一个对象并将其推入一个数组（范围变量）。我在调试中看到已检索到数据并且$ scope变量已正确填充。问题是它没有在ng-repeat中显示。

我的功能：

$scope.getMessagesByRegion = function(regionId){

    console.log('Function start');
    var rootRef = firebase.database().ref();
    var regionMessagesRef = rootRef.child("region_messages/"+ regionId);
    $scope.messages_by_region = []; // Here I reset the scope variable

    regionMessagesRef.on('child_added', function(rmSnap) {

        var messageRef = rootRef.child("messages/"+rmSnap.key);
        messageRef.once('value').then(function(msgSnap){

            var msg = {
                key : msgSnap.key,
                name : msgSnap.val().name,
                type : $scope.getTypeName(msgSnap.val().type),
                show_only_once : rmSnap.val().show_only_once,
                pre_requisite_message : rmSnap.val().pre_requisite_message
            }
            console.log(msg); // here I see the object in the console. it is OK
            $scope.messages_by_region.push(msg); // pushing the item
            console.log('----------------');
            console.log($scope.messages_by_region);
        })

    });
}

我的HTML：

            <table class="table">
                <thead>
                <tr>
                    <th>Message name</th>
                    <th>Type</th>
                    <th>Show only once</th>
                    <th>Pre requisite</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="msg in messages_by_region">
                    <td ng-bind="msg.name"></td>
                    <td ng-bind="msg.type"></td>
                    <td ng-bind="msg.show_only_once"></td>
                    <td ng-bind="msg.pre_requisite_message"></td>
                </tr>
                </tbody>
            </table>

这是我在控制台中看到的：

问题是即使在数组中有一个对象，它也不会显示在视图中。就像有一个空数组设置为$scope.messages_by_region变量

我很难搞清楚自己做错了什么。你能看出我的功能有什么问题吗？

感谢您的帮助。

Answer 1

试，

$scope.$apply(function(){
 $scope.messages_by_region.push(msg);
});

，或者

$scope.messages_by_region.push(msg);
$scope.$apply();

Answer 2

由于你正在使用异步函数（Cosbase of firebase API），你应该告诉angular刷新HTML;

使用

$scope.$diggest()

您可以在https://www.sitepoint.com/understanding-angulars-apply-digest/

上找到更多信息

Answer 3

当您执行异步调用时，您需要告诉angular使用$apply调用来刷新值的更改，您可以执行以下操作：

$scope.getMessagesByRegion = function(regionId) {

  console.log('Function start');
  var rootRef = firebase.database().ref();
  var regionMessagesRef = rootRef.child("region_messages/" + regionId);
  $scope.messages_by_region = []; // Here I reset the scope variable

  regionMessagesRef.on('child_added', function(rmSnap) {

    var messageRef = rootRef.child("messages/" + rmSnap.key);
    messageRef.once('value').then(function(msgSnap) {
        var msg = {
          key: msgSnap.key,
          name: msgSnap.val().name,
          type: $scope.getTypeName(msgSnap.val().type),
          show_only_once: rmSnap.val().show_only_once,
          pre_requisite_message: rmSnap.val().pre_requisite_message
        }

      $scope.$apply(function() {
        console.log(msg); // here I see the object in the console. it is OK
        $scope.messages_by_region.push(msg); // pushing the item
        console.log('----------------');
        console.log($scope.messages_by_region);
      });
    });
  });
}

有关此行为的详细信息，您还可以阅读描述问题here

的文章

AngularJS：双向绑定的奇怪行为（ng-repeat）

3 个答案: