javascript - 在 Angular Controller 中处理异步更新的正确方法

Question

这是我的设置——我有一个 Controller ，它使用一个服务来完成一些工作，然后异步返回数据。在本例中，数据是通过超时返回的，但在现实生活中，这会做一些更有趣的事情:

查看:

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

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

</div>

Controller :

(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. 为什么当超时解决并且 Controller 中发生 vm.greeting 分配时我的 View 没有更新？我见过人们描述“Angular 内部与 Angular 外部”，但在我看来，我在这里并没有“Angular 外部”。

2. 我知道我可以调用 $scope.$apply()，但我遇到了“digest is already in progress ”错误，而且我似乎不必这样做。

3. 我应该有更好的方式来组织我的组件吗？我还尝试过通过 $rootScope 广播事件并在 Controller 中编写事件处理程序，但这种安排表现出相同的结果(即，当异步模型更改发生时， View 不会更新)。

Answer 1

ng-show 不需要大括号

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

改变

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

至

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