在加載Angular Controller數據之前不觸發數據綁定

Question

我正在嘗試遵循John Papa的“ 控制器激活過程” ，在該過程中，控制器所需的數據將加載到控制器的構造函數中。 但是，由於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; }是否有解決此問題的好方法if (!this.movie) { return; } 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>

如果對象非常復雜，可能會很煩人，但是只需設置一次即可，然后您很容易就能弄清所確定的對象結構是什么（同樣，更好的存儲對象的位置將是服務）。

另一個解決方案是使用router resolve屬性，該屬性強制在實例化控制器之前將承諾重新解析（並將已解析的對象作為參數注入到控制器中）ui-router為此提供了一種簡便的方法（ https://github.com / angular-ui / ui-router / wiki ），但angular的默認路由器也具有此選項（ https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider）