AngularJS/UIRouter：路由更改不會更新視圖，直到目標狀態的控制器完成執行

Question

我有一個帶UI路由器的Angular應用程序。

我的觀點，我有一個ui-sref要我的路線：

<a ng-href="#" ui-sref="app.myRoute">Next</a> 

我要負載控制器的路線會執行上加載一項艱鉅的任務：

app.controller('MyRouteController', function($scope) { 
    this.load = function() { 
     // ... make a long service call 
    }; 

    this.load(); 
}); 

我看到的行爲是，單擊ui-sref鏈接後，視圖不會更改，直到load()方法完成執行。即使將load()呼叫打包在$timeout中，也是如此。

如何立即更改視圖並使load()調用異步以加載視圖？

謝謝！

Answer 1

它應該等待load完成同時被調用。 And it shouldn't (and it won't)，同時調用$timeout。

var app = angular.module('app', ['ui.router']); 

app.config(function ($stateProvider) { 
    $stateProvider 
    .state('root', { 
     url:'/', 
     template: '<div ng-controller="AppController"></div>', 
     controller: function ($timeout) { 
      console.log('route controller') 
      $timeout(function() { 
      console.log('route controller timeout') 
      }) 
     } 
    }) 
    .state('otherwise', { 
     url: "*path", 
     template: '<a ui-sref="root">root</a>' 
    }); 
}); 

app.controller('AppController', function() { 
    console.log('app controller') 
});