Правильный способ обработки асинхронных обновлений в угловом контроллере

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 происходит в моем контроллере? Я видел, как люди описывают «внутри углового и вне углового», но мне кажется, что я не пошел «вне углового» здесь.

2. Я знаю, что могу называть $ scope. $ Apply(), но я столкнулся с ошибкой «digest is already in progress», и снова мне кажется, что я не должен этого делать.

3. Есть ли лучший способ организовать мои компоненты? Я также экспериментировал с трансляцией события над $ rootScope и записью обработчика событий в контроллере, но эта компоновка имеет тот же результат (а именно, представление не обновляется при изменении асинхронной модели).

Answer 1

Вам не нужны фигурные скобки для нг-шоу

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.