適當的方式來處理角度控制器中的異步更新

這是我的設置 - 我有一個控制器使用的服務有一些工作，然後異步返回數據。在這種情況下，數據是通過超時返回，但在現實生活中，這將做一些更有趣：適當的方式來處理角度控制器中的異步更新

查看：

<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); 

})();

問題：

爲什麼我的視圖在超時結算並且vm.greeting賦值發生在我的控制器中時沒有更新？我曾經見過人們描述過「Angular vs Angular」，但在我看來，我並沒有在這裏「走出Angular」。我知道我可以調用$ scope。$ apply（），但我遇到了「digest is already in progress」錯誤，並且它似乎並不像我應該這樣做。
有沒有更好的方法我應該組織我的組件？我也嘗試過在$ rootScope上廣播一個事件，並在Controller中寫入一個事件處理程序，但是這種安排表現出相同的結果（即當發生異步模型更改時不更新視圖）。

來源

2015-02-23 Alex

它實際上是否使用.success？你可以驗證vm.greeting實際上是否被設置？ – ribsies 2015-02-23 23:10:45

@ribsies是的。我編輯了這個問題的代碼以除去所有無關的內容，但超時正在解決，我的.then（成功）函數正在執行。當我在Chrome Dev Tools中調試範圍並查看angular.element（$ 0）.scope（）。root.greeting的值時，我看到了正確的值。 – Alex 2015-02-23 23:16:24

你不需要爲NG-秀花括號

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

變化

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

到

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

來源

2015-02-23 23:29:28 goreorto

的方式你有你的結構代碼是一個ve與我平時所做的不同。看看這個鏈接是一個偉大的風格指南。 http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

至於您的問題，Angular使用$ scope將控制器中的值綁定到視圖。所以你的控制器應該注入$ scope，然後你可以做$ scope.greeting來代替vm.greeting。

來源

2015-02-23 23:35:48 Davie

$範圍的使用（或缺乏使用）不是我的問題。使用「controller as ...」語法意味着您不要將屬性和函數分配到$ scope，而是分配給Controller對象。 – Alex 2015-02-23 23:55:11

就像我說過的，我做的事情不同，但我會留下我的回答，因爲風格指南值得一讀。 – Davie 2015-02-23 23:57:08

將看看你指的那個鏈接。我已經看了很多例子，但喜歡這個指導到目前爲止：https://github.com/johnpapa/angularjs-styleguide – Alex 2015-02-24 01:36:31

適當的方式來處理角度控制器中的異步更新

回答

相關問題