在加载 Angular 控制器数据之前不触发数据绑定

Question

我正在尝试遵循 John Papa 的 Controller Activation Process，其中控制器需要的数据是在控制器的构造函数中加载的。但是，由于 Angular 在加载数据之前尝试绑定到 null 对象，我的页面触发了很多错误。

例子

控制器初始化并执行 AJAX 调用以获取有关电影的信息。同时，HTML 尝试加载有关电影导演的信息。

Controller.js

class MovieController {
  constructor(movieHttp) {
    this.movieHttp = movieHttp;
    this.movie = null;
    activate();
  }
  activate() {
    this.movieHttp.getMovie(...).then(movieData => { this.movie = movieData; });
  }
}

index.html

...
<span ng-bind="vm.movie.actor.name"></span>
...

除了将 ng-bind 更改为函数调用，然后执行 if (!this.movie) { return; } 之外，是否有解决此问题的好方法？

Answer 1

您可以在 ctrl 上设置一个空的电影对象（或者更好的是服务），并在 ajax 调用 returns 时更新它：

  class MovieController {
    constructor(movieHttp) {
      this.movieHttp = movieHttp;
      this.movieData = {
         movie: {
            actor: {
               name: ''

            },
            title: ''
         }
      };
      activate();
   }
  activate() {
    this.movieHttp.getMovie(...).then(movieData => { this.movieData.movie = movieData;})
  }
 }

和你的html：

    <span ng-bind="vm.movieData.movie.actor.name"></span>

如果对象非常复杂，但是您只设置一次，那么您就可以很容易地弄清楚返回的对象结构是什么（同样，存储它的更好地方是服务）。

另一个解决方案是使用路由器 resolve 属性，它强制在控制器实例化之前 reolved promise（并将解析的对象作为参数注入控制器） ui-router 有一个方便的方法 (https://github.com/angular-ui/ui-router/wiki), but angular's default router also has this option (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)

在加载 Angular 控制器数据之前不触发数据绑定

Not Trigger Data-Binding until Angular Controller data is loaded

data-binding

angularjs

angular-promise

例子