Question

我尝试创建一个带有角度的应用程序，并以某种方式将子状态设置为不加载。

app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");

$stateProvider
    .state('home', {
        url        : "/",
        templateUrl: "/admin/home/"
    })
    .state('users', {
        url        : "/users/",
        templateUrl: "/admin/users",
        controller : function ($stateParams) {
            console.log($stateParams);


            console.log("users");
        }
    })
    .state('users.new', {
        url        : "^/users/user/",
        templateUrl: "/admin/users/new",
        controller : function () {
            console.log("users.new");
        }
    })
    .state('users.user', {
        url        : "^/users/user/:uuid",
        templateUrl: function ($stateParams) {

            console.log($stateParams);

            return "/admin/users/" + $stateParams.uuid
        },
        controller : function () {
            console.log("users.user");
        }
    });

访问页面时

/用户/用户/ 55d8b1c706387b11480d60c1

我看到加载页面的请求，但只执行了“用户”控制器。

此问题仅出现在子状态，在父状态之间切换时没有问题。

我使用最新版本的angular和ui-routes。

任何想法？

Answer 1

Please read this DOC

你错了是等级。子状态使用父模板作为root并尝试查找嵌套的<ui-view>

对于嵌套的viws，您可以添加抽象状态user，而不使用空模板<ui-view></ui-view>的url。然后将用户重命名为E.G. user.index，它对我有用

1st（可能有效）

$stateProvider
    .state('home', {
        url        : "/",
        templateUrl: "/admin/home/"
    })
    .state('users', {
        template: "<ui-view></ui-view>",
    })
    .state('users.index', {
        url        : "/users/",
        templateUrl: "/admin/users",
        controller : function ($stateParams) {
            console.log($stateParams);

        console.log("users");
    }
})
.state('users.new', {
    url        : "^/users/user/",
    templateUrl: "/admin/users/new",
    controller : function () {
        console.log("users.new");
    }
})
.state('users.user', {
    url        : "^/users/user/:uuid",
    templateUrl: function ($stateParams) {

        console.log($stateParams);

        return "/admin/users/" + $stateParams.uuid
    },
    controller : function () {
        console.log("users.user");
    }
});

第二种方式是使用绝对命名的观点E.G。

views: { 
      "": { templateUrl: 'pages/menu.html' }, // relative noName view
      "header": { templateUrl: "pages/header.html"}, //relative named view
      "content@": { // Absolute name
           template: "<ui-view></ui-view>",
           controller: 'AuthController'}
    }

角度路线没有刷新视图

1 个答案: