在Angular Controller中處理異步更新的正確方法

Question

這是我的設置-我有一個使用服務的控制器，該服務執行一些工作，然后異步返回數據。 在這種情況下，數據是通過超時返回的，但是在現實生活中，這樣做會更有趣：

視圖：

<div ng-controller="RootController as root">

  <h1>Angular Project</h1>
  <div ng-show="{{root.greeting}}">
    <p>{{root.greeting}}</p>
  </div>

</div>

控制器：

(function(){

  'use strict';

  function RootController(greetingService) {

    var vm = this;
    vm.greeting = '';

    // startup logic
    activate();

    function activate() {
        greetingService.greeting().then(
          function( response ) {
              vm.greeting = response;
          },
          function( error ) {
              vm.greeting = error;
          }
        );
    }
  }
  RootController.$inject = ['greeting'];
  angular.module('app.core').controller('RootController', RootController);

})();

服務：

(function() {
  'use strict';

  // Greeting Service
  function greeting( $timeout ) {

    // public API
    var service = {
        greeting:   greeting
    };
    return service;

    // internal functions
    function greeting() {
        return $timeout( function() {
            return 'Hello world!'; 
        }, 1000 );
    }

  }

  temp.$inject = ['$timeout'];
  angular.module('app.core').factory( 'greeting', greeting );

})();

問題：

1. 為什么當超時解決並且控制器中發生vm.greeting分配時，我的視圖沒有更新？ 我見過人們形容“ Angular內部與Angular內部”，但是在我看來，我並沒有在“ Angular外部”進行過描述。

2. 我知道我可以調用$ scope。$ apply（），但是我遇到了“ 摘要已在進行中 ”錯誤，看來我也不必這樣做。

3. 有沒有更好的方式來組織組件？ 我還嘗試了通過$ rootScope廣播事件並在Controller中編寫事件處理程序，但是這種安排表現出相同的結果（即，發生異步模型更改時，視圖不會更新）。

Answer 1

ng-show不需要花括號

https://docs.angularjs.org/api/ng/directive/ngShow

更改

<div ng-show="{{root.greeting}}">

至

<div ng-show="root.greeting">

Answer 2

您構造代碼的方式與我通常的做法大不相同。 查看此鏈接，獲取出色的風格指南。 http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

對於您的問題，Angular使用$ scope將控制器中的值綁定到視圖。 因此，您的控制器應注入$ scope，然后可以執行$ scope.greeting代替vm.greeting。