API调用完成之前的AngularJS双向绑定

Question

我正在使用基本API调用来获取要在表格中显示的项目数组。我的表加载完全正常，但我注意到Angular抛出一堆错误告诉我它不能插入表达式等。

我意识到这是因为对于页面加载和API调用响应之间的分秒，Angular正在尝试呈现表，并且显然会出现错误，因为用于填充表的数组尚不存在。

因此，摆脱这个问题的标准方法是什么？我应该简单地使用ng-If或ng-hide来停止渲染，直到API调用完成，或者是否有另一种方法告诉角度为＆＃34;等待＆＃34;在渲染DOM之前。

我也可以通过初始化像$scope.dataArray = []这样的数组来解决这个问题，但是在处理具有许多需要初始化的数组和对象的复杂JSON对象时，我觉得这很麻烦。

有人可以解释最好的方法吗？

Answer 1

可以处理的另一种方法是使用路由器或状态提供程序上的resolve属性。

使用ui-router的{​​{1}}，您可以执行此操作：

$stateProvider

在实例化控制器之前，.state('mystate', { controller: function($scope, data) { $scope.data = data; }, resolve: { data: ['$http', function($http) { return $http.get('/api/get-data'); }] } }) 的承诺将得到解决。这与使用$http.get()的方式相同。

• $ routeProvider（ngRoute）docs：https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider
• 视频显示决心：https://egghead.io/lessons/angularjs-resolve
• 另一篇解释决心的博客：http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

Answer 2

您已经遇到的解决方案是正确的。即使你正在为Angular提供一个空的范围变量或集合，这对框架来说也很好。它不会接受的是一个完整的空引用。

为避免玷污您的控制器，请考虑将某些模型添加到父控制器中，并嵌套相关对象，即$scope.magic[]，其中包含$scope.magic.user等。

那是福音！