实施例

Question

我试图关注John Papa的Controller Activation Process，其中控制器所需的数据被加载到控制器的构造函数中。但是，由于Angular尝试绑定到null对象，直到数据加载，我的页面才会触发很多错误。

实施例

Controller初始化并执行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调用返回时更新它：

  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>

如果对象非常复杂，可能会很烦人，但是你只设置了一次，而且你可以很容易地弄清楚对象结构是什么（同样是一个更好的存储它的地方就是服务）。

另一个解决方案是使用路由器解析属性，该属性强制在实例化控制器之前解析promise（并将解析后的对象作为参数注入控制器） ui-router有一个方便的方法（https://github.com/angular-ui/ui-router/wiki），但angular的默认路由器也有这个选项（https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider）

在加载Angular Controller数据之前不触发数据绑定

实施例

1 个答案: