适当的方式来处理角度控制器中的异步更新

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 vs Angular”，但在我看来，我并没有在这里“走出Angular”。我知道我可以调用$ scope。$ apply（），但我遇到了“digest is already in progress”错误，并且它似乎并不像我应该这样做。

2. 有没有更好的方法我应该组织我的组件？我也尝试过在$ rootScope上广播一个事件，并在Controller中写入一个事件处理程序，但是这种安排表现出相同的结果（即当发生异步模型更改时不更新视图）。

Answer 1

你不需要为NG-秀花括号

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

变化

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

到

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

Answer 2

的方式你有你的结构代码是一个ve与我平时所做的不同。看看这个链接是一个伟大的风格指南。 http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

至于您的问题，Angular使用$ scope将控制器中的值绑定到视图。所以你的控制器应该注入$ scope，然后你可以做$ scope.greeting来代替vm.greeting。