加载时不显示角度数据

Question

加载时未显示的 ng-binding 使用范围内数组中的数据。

该数组从另一个数组（我们称它们为 A）中获取数据。

加载时已经显示的 ng-binding 使用来自数组 A 的数据。

以下是显示真正奇怪的数据的几种方法：
- 聚焦然后不聚焦任何输入
- 更改任何输入的值

你可以试试here这个bug。

这里我提供了一些我的代码：

      <div class="container-fluid " id="mainApp"> 

                <div class="container" ng-repeat='content in fetchedData'>

                  <h4>{{content[1]}}</h4>

                  <div class="row" ng-repeat='data in content[2]'>
                  <p class="pull-left">{{data[0]}}<p>
                  <input data-toggle='tooltip' title ='{{data[1]}} hours per page'  ng-model='data[2]' type='number' min=0 class='form-control numberInput pull-right'>
                  </div>

                </div>

                   <div class="container">

                    <h4>{{languageData[0]}}</h4>

                    <div class="row" >
                    <p class="pull-left">{{languageData[1][0][0]}}<p>
                    <input data-toggle='tooltip' title ='{{languageData[1][0][1]}} hours per page'  ng-model='languageData[1][0][2]' type='number' min=0 class='form-control numberInput pull-right'>
                    </div>

                  </div>
      </div>

获取languageData的js代码文件：

$scope.getLangData = function (){
            var langData = [];
            var langPanel = Parse.Object.extend("Panel");

            var langpanelObject = new Parse.Query(langPanel);

            langpanelObject.equalTo('editable',false);
            langpanelObject.find( {
                success:function(results) 
                {
                    for (var i = 0; i < results.length; i++) {
                             langData.push(results[i].get("title"),[],results[i].id);
                    };

                    for (var i = 0; i < $scope.fetchedRows.length; i++) {
                        if ($scope.fetchedRows[i][3]== langData[2]) {
                            langData[1].push($scope.fetchedRows[i]);
                        }
                    };
                },
                error:function(error) 
                {
                    alert("Error: "+ error.code + " " +error.message);
                }
            });
            $scope.languageData = langData;
            $scope.$apply();
}

我猜是 js 代码导致了这个错误，因为我有一个按钮，点击时触发 getLangData() 函数（即站点中的Reset 按钮），数据再次消失。但是，我不知道它如何以及为什么会影响 ng-binding 的可见性。

Answer 1

$scope.$apply() 在您的异步调用解决之前正在运行。

由于 Parse 库不在 Angular 线程中，您必须在范围内运行 $apply，但正确的方法是：

langpanelObject.find( {
    success: function(results) {
        for (var i = 0; i < results.length; i++) {
            langData.push(results[i].get("title"),[],results[i].id);
        };

        for (var i = 0; i < $scope.fetchedRows.length; i++) {
            if ($scope.fetchedRows[i][3]== langData[2]) {
                langData[1].push($scope.fetchedRows[i]);
            }
        };

        $scope.$apply(function () {
            $scope.languageData = langData;
        });
    },
    error: function(error) {
        alert("Error: "+ error.code + " " +error.message);
    }
});

最好使用$apply 将函数作为参数传递，而不仅仅是$scope.$apply()。

Answer 2

问题是因为 Javascript 在我的 languageData 更新之前执行了 scope.$apply() 。 解决方法是通过 setTimeOut() 延迟 $apply() 函数。

setTimeout(function(){ $scope.$apply();}, 500);