AngularJS/UI 路由器：在目标状态的控制器完成执行之前，路由更改不会更新视图答案

【问题标题】：AngularJS/UIRouter: Route change doesn't update view until controller of target state is finished executingAngularJS/UI 路由器：在目标状态的控制器完成执行之前，路由更改不会更新视图
【发布时间】：2015-09-25 15:08:20
【问题描述】：

我有一个带有 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() 调用异步加载视图？

谢谢！

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案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')
});

【讨论】：