角度コントローラデータがロードされるまでデータトリガが発生しない

Question

コントローラのコンストラクタでコントローラに必要なデータがロードされるJohn PapaのController Activation Processをフォローしようとしています。しかし、データがロードされるまで、nullオブジェクトにバインドしようとするAngularのため、私のページが多くのエラーを引き起こしています。

例

コントローラの初期化や映画についての情報を取得するために、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> 

をそれオブジェクトが非常に複雑な場合は迷惑になるかもしれませんが、一度しか設定しないと、オブジェクトの構造が何であるかを簡単に把握することができます。

コントローラがインスタンス化される前に、約束がreolvedあれば強制的にルータresolveプロパティを使用して（と自分のコントローラにパラメータとして解決されたオブジェクトを注入する） UI-ルータはそのためのconvinent方法を持っている別の解決策は、（https://github.com/angular-ui/ui-router/wiki）角度のデフォルトルータにもこのオプションがあります（https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider）