Question

子状态的结算正在延迟父状态的加载

我的状态配置为：

$stateProvider
          .state('a', {
            url: '/a/:aid',
            controller: 'ACtrl',
            templateUrl: 'a.html'
          })
          .state('a.b', {
            url: '/b/:bid',
            controller: 'BCtrl',
            templateUrl: 'b.html',
            resolve: {
              DataService: 'DataService',
              data: function(DataService) {
                return DataService.getData(); //Returns a http promise
              }
            }
          });

的index.html：

<nav>
  ....
</nav>
<div ui-view></div>

a.html有：

<sidebar>
...
</sidebar>
<div ui-view></div>

b.html有：

<div ng-repeat="d in data">{{ d }} </div>

当我点击网址http://example.com/a/1/b/1时，a.html不会立即加载。我似乎是这个状态＆＃39; a＆＃39;正在等待儿童州的解决方案＆＃39; a.b＆＃39;完成。

我想要做的是在子状态解析其依赖项时加载a.html（显示侧栏和空div）probablby和加载图标。的 [编辑] 请注意我的州＆＃39; a＆＃39;没有做出决定，但仍然等待其子女结算。我想主要避免这个

一旦加载了所有内容，当我更改bid时，我希望它在孩子解析新数据时再次显示加载图标。

这是我第一次发帖提问，所以如果我不够清楚，我会事先道歉。

Answer 1

正在加载订单

当你直接访问孩子时，Ui-router首先加载父母然后加载孩子。请从你的萤火虫检查一下。

在您的情况下，以下是订单

a.html
a.b解决流程（XHR请求）
a.b.html

用于显示加载图片

方法1

您可以尝试使用angular-loading-bar模块。它正在管理XHR请求处理时页面中显示/隐藏加载的麻烦。此加载图片将显示在浏览器的顶部。

这个想法很简单：每当XHR添加一个加载栏/进度条   请求以角度出去。同一时间内有多个请求   句点捆绑在一起，使每个响应递增   进度条适量。

这很酷，因为您只需将其包含在您的应用中，就可以了   作品。没有复杂的设置，也没有必要维持状态   装载栏;这一切都由拦截器自动处理。

Apprach 2

如果要根据屏幕在特定位置显示加载图像，则需要使用ng-show / ng-hide

通过控制器处理它

UI路由器子解析延迟父加载

1 个答案: