Question

我已经设置了一个包含多个子视图的父视图，它似乎在应用程序中没有问题。问题是如果您刷新页面或尝试使用适当的URL直接转到子视图。

以下是我正在加载的状态。这是父州：

{name: "myTeam", url: "/myTeam", template: "<my-team></my-team>"}

这是其中一个孩子：

{name: "myTeam.info", url: "/info", template: "<my-team.info></my-team.info>"}

这是另一个：

{name: "myTeam.checkin", url: "/checkin/{book}/{club}/{team}/{bus}", template: "<my-team.checkin></my-team.checkin>"}

因此，如果我访问信息视图，它会正确加载模板并将网址设置为“/ myTeam / info”。如果尝试刷新页面或刚刚从URL“/ myTeam / info”开始，它将不会加载状态/模板。

我将代码添加到angular-ui-router.js（版本0.1.2）以尝试调试。我在第912行添加了console.log（）行。

UrlMatcher.prototype.exec = function (path, searchParams) {
  var m = this.regexp.exec(path);
  console.log("  -->  " + this.regexp + " -- " + path + " = " + m);
  if (!m) return null;
  searchParams = searchParams || {};

这是输出：

  -->  /^\/myTeam\/?$/ -- /myTeam/info = null
  -->  /^\/info(.*)?\/?$/ -- /myTeam/info = null
  -->  /^\/checkin\/([^\/]*)?\/([^\/]*)?\/([^\/]*)?\/([^\/]*)?(.*)?\/?$/ -- /myTeam/info = null

因此，它与父母或孩子不匹配。

我在关注Nested States and Nested Views上的例子。他们的网址看起来和我一样。

我看不出它有何影响，但我使用UI extras将这些作为未来状态加载并使用ocLazyLoad。

关于如何让URL工作的任何想法？或者，它应该如何工作？

Answer 1

我最终确定问题出在UI Extras和未来状态加载上。

为了时间的缘故，我最终走出了轻松的道路。我改变了我的项目，不使用任何子状态，这就解决了我的问题。

从我能说的最好的情况来看，它并没有加载所有的孩子状态。未来的状态加载器仅匹配父级并加载父级。

我认为我的问题类似于我在这里找到的这个问题： UI Router Extras Issue #63

我试图在我未来的状态加载器中编写代码，该代码将加载父状态及其所有子状态。这迫使我不得不修改UI路由器附加功能以接受一系列承诺，我不得不修改太多东西以使其工作。

希望在某些时候我可以尝试在我的项目之外构建一个更完整的修复并贡献它，但是现在，我的解决方案是避免子状态。

Answer 2

很奇怪，我的项目有子女状态，有些孩子也有更多的孩子状态，而且工作正常没有问题，我会告诉你我如何设置我的网址：

<强> dashboardState.js

状态为url: ''的是主页，当您导航到url / home时会加载它，但是他们的子项会在仪表板中加载。

(function () {
    'use strict';

    angular
        .module('myapp')
        .config(dashboardStates);

    function dashboardStates($stateProvider) {

        var dashboard = {
            name: 'dashboard',
            abstract: true,
            url: '/home', // view inicial abaixo
            templateUrl: 'app/components/Dashboard/view/dashboard.html',
            controller: 'DashboardController',
            controllerAs: 'dashboard'
        };

        var dashboardHome = {
            name: 'dashboard.home',
            url: '',
            parent: 'dashboard',
            templateUrl: 'app/components/Dashboard/view/dashboard.home.html',
            controller: 'DashboardController',
            controllerAs: 'home',
            ncyBreadcrumb: {
                label: 'Home'
            }
        };


        // states
        $stateProvider
            .state(dashboard)
            .state(dashboardHome);
    }

}());

并在信息中心视图中加载以下状态：

<强> profileState.js

(function () {
    'use strict';

    angular
        .module('myapp')
        .config(profileStates);

    function profileStates($stateProvider) {

        var profile = {
            name: 'dashboard.profile',
            url: '/profile',
            templateUrl: 'app/components/Profile/view/profile.html',
            controller: 'ProfileController',
            controllerAs: 'profile'
        };

        var profileEdit = {
            name: 'dashboard.profile.edit',
            url: '/edit',
            templateUrl: 'app/components/Profile/view/profile.edit.html',
            controller: 'ProfileController',
            controllerAs: 'profile'
        };

        $stateProvider
            .state(profile)
            .state(profileEdit);
    }

}());

更多信息：https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

URL路由到子视图

2 个答案: