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完成。当它被$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')
});