javascript - 加载时不显示 Angular 数据

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 库不在 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()。