Question

我正在开发一个具有多个嵌套状态的Angular应用程序。

初始ui-view根据身份验证加载应用程序或登录页面。加载应用后，它会包含顶部标题和另一个名为ui-view的内容＆＃39;这会根据当前标签/导航加载内容。

$stateProvider.state( 'app.home.dashboard', {
url: 'home/dashboard',
views: {
   "content@app.home": {
    controller: 'DashboardCtrl',
    templateUrl: 'app/home/dashboard.html'
  }
},
data: {
  authenticate: true
},
resolve: {
}

}）

这是仪表板状态配置。

问题：现在我想在仪表板中加载多个数据小部件，每个小部件都有自己的解析，模板和视图。

因此，一旦加载仪表板，所有这些多个子视图应该自动开始加载。

.state( 'app.home.dashboard.dataWidget.spend', {
url: '',
views: {
  "spend@app.home.dashboard": {
    controller: 'DashboardDataWidgetCtrl',
    templateUrl: 'app/home/dashboard/data-widget.html'
  }
},
data: {
  authenticate: true
},
resolve: {
  spend: ['userInfo','apiDataFactory', function(userInfo, apiDataFactory) {
    apiDataFactory.getSpend()
    .then(function(response) {
      return response.data;
    });
  }]
}

}）

.state( 'app.home.dashboard.dataWidget.touchPoint', {
url: '',
views: {
  "touchPoint@app.home.dashboard": {
    controller: 'DashboardDataWidgetCtrl',
    templateUrl: 'app/home/dashboard/data-widget.html'
  }
},
data: {
  authenticate: true
},
resolve: {
  spend: ['userInfo','apiDataFactory', function(userInfo, apiDataFactory) {
    apiDataFactory.getTouchPoint()
    .then(function(response) {
      return response.data;
    });
  }]
}

}）

但是当我进入仪表板状态时，这些子状态不会自动加载。我怎样才能做到这一点？我究竟做错了什么？

创建了一个小型plunker应用来说明我的问题和方法。我应该如何同时将数据解析到小部件中？

Answer 1

我已经修复了你的插件。仪表板状态是问题：

.state('app.home.dashboard', {
  url: 'home/dashboard',
  views: {
    "content@app.home": {
      controller: 'appDashboardCtrl',
      templateUrl: 'dashboard.html'
    },
    "visit@app.home.dashboard": {
      controller: 'appContactCtrl',
      templateUrl: 'contact.html'
    },
    "reach@app.home.dashboard": {
      controller: 'appAboutCtrl',
      templateUrl: 'about.html'
    }
  }
})

请参阅：http://plnkr.co/edit/fDLQTIpdfROageEtBPZv?p=preview

您可以在此处参考以下信息：

https://github.com/angular-ui/ui-router/wiki/multiple-named-views

发布模板后，我可以进一步提供帮助。

如何在Angular ui-router中的嵌套状态中使用多个视图？

1 个答案: