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调用时https://github.com/spring-projects/spring-integration/pull/1568。

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

AngularJS / UIRouter：路由更改不会更新视图，直到目标状态的控制器完成执行

1 个答案: