如何等到数据分配给 Angularjs 中的模型？

Question

我有一个模型，用于在我的视图中迭代和创建表格结构。我有一个按钮，点击它我必须从数据库中获取最新值并分配给模型。然后我得到模型的 innerHTML 并创建我当前视图的 pdf。

我遇到一个问题，在数据完全分配给模型和视图刷新之前，下一条语句获取容器 div 的 innerHTML 执行，我得到了我的视图的旧快照。在模型完成赋值和视图刷新之前，我如何保持语句的执行？

Answer 1

您应该将代码包装在 $timeout 中。这将确保您的代码在下一个周期中执行，并且您将获得最新的快照。

$timeout(function(){
   <your code to get innerHtml>
})

无需提及任何超时值，因为一旦视图更改就会调用此值

PS: 添加$timeout作为依赖。

Answer 2

我会使用 angular 中的 ng-show 并仅在控制器中加载数据时显示您的内容：

HTML:
<div ng-app="myApp" ng-controller="myCtrl" data-ng-init="getValues()">
 <div ng-show="dataLoaded">
  <input type="number" ng-repeat="(key, value) in randomArray track by  $index" ng-model="randomArray[key]">

 </div>
</div>


CONTROLLER:
.controller('myCtrl', function($scope) {

  $scope.getValues = function() {

    $scope.randomArray = ['myKey', 'anotherKey', 'thirdKey', 'key4'];    
    angular.forEach($scope.randomArray, function(value, key){
      $scope.randomArray[key] = 0;
    });

    // Set dataLoaded to true
   $scope.dataLoaded = true;
  }

});

编码：http://codepen.io/giannidk/pen/KrmgNL?editors=1011

如何等到数据分配给 Angularjs 中的模型？

How to wait till data is assigned to model in Angularjs?

angularjs

data-binding

model

angular-promise

2-way-object-databinding