HTTP Angular 1.5を取得する

Question

AngularJSで1.5コンポーネントを使用しようとしています。 $ HTTPを使用してJSONファイルを取得し、約束を返すサービスがあります。次に、私のコンポーネントコントローラで約束を解決し、this.workを使用してコントローラの値に割り当てます。これは私のHTMLページには表示されませんが。これが混乱している場合、私はコードにコメントを入れて少し説明しました。

私の理解では（私のコントローラで）非同期的に起こっていますが、なぜそれが解決されたら、私は表示されていないのですか？ビューで変数$ctrl.workに変更されました。代わりに私は変数から値を得ることはありません。

// Component 
    (function() { 
     angular.module('development') 
      .component('pgDev', { 
       templateUrl: 'app/development/development.template.html', 
       controller: ['workList', function (workList) { 

        //this.work = 'HELLO WORLD'; // <- this shows up in the html if uncommented 

        workList.getWorkItems().then(function (d) { 
         console.log(d.test); // outputs: myjsonfile 
         this.work = d.test; // <- this doesnt show in the html 
        }); 

       }] 
      }) 
    }()); 

    // HTTP Get Service 
    (function() { 
     angular.module("development").factory("workList", ["$http", 
      function ($http) { 
       return { 
        getWorkItems: function() { 
         return $http.get("data/worklist/worklist.json").then(function (d) { 
          return d.data; 
         }); 
        } 
       } 
      }]) 
    })(); 

    // html 
    workitems: {{$ctrl.work}} 

Answer 1

あなたは、あなたのコールバック関数の内部thisない場合は、コンポーネントコントローラのインスタンスを意味し、実行のコンテキストを失うされています。シンプルで現代的なソリューションは、通常の匿名の代わりにarrow functionを使用することです。

workList.getWorkItems().then(d => { 
    this.work = d.test; 
});