javascript - Angular 路线不刷新 View

Question

我尝试创建一个具 Angular 应用程序，但不知何故子状态未加载。

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

我看到加载页面的请求，但只有“用户” Controller 被执行。

这个问题只出现在子状态，在父状态之间切换没有问题。

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

有什么想法吗？

Answer 1

Please read this DOC

你的错误在于层次结构。子状态使用父模板作为根并尝试查找嵌套 <ui-view>

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

第一个(可能有效)

$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");
    }
});

第二种方式是使用绝对命名的 View 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'}
    }