加载

Question

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

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

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

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

您可以尝试错误here。

在这里，我提供了一些代码：

      <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库不在角度线程中，你必须对范围运行$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

The problem is because Javascript executes scope.$apply() before my languageData is updated. The solution is to delay the $apply() function by setTimeOut().

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