Javascript AngularJS：双向绑定的奇怪行为（ng重复）

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

我的职能：

$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\u by\u region变量设置了一个空数组

我很难弄清楚我做错了什么。你能看到我的功能有什么问题吗

---

感谢您的帮助。

既然您使用的是firebase API的异步函数，您应该告诉angular刷新HTML

使用

有关更多信息，请访问

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

或者

---

在执行异步调用时，需要告诉angular使用$apply call刷新值中的更改，您可以使用：

$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);
      });
    });
  });
}

---

有关此行为的更多信息，您还可以阅读描述此问题的文章

尝试按区域添加console.log$scope.messages\u；调用一个测试函数并进行ng单击调用此函数并查看发生了什么。您是否在控制台中看到任何错误？是否尝试不使用ng bind指令？{{msg.name}谢谢！我不得不使用$scope.$applyglad它帮助我工作！谢谢应用接收函数，以便它只检查该函数中受影响的值？调用非角度函数messageRef。因此，一旦调用，您必须告诉角度函数某个$scope变量已更改。

$scope.messages_by_region.push(msg);
$scope.$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);
      });
    });
  });
}