角度路线不刷新视图答案

【问题标题】：Angular routes not refreshing the view角度路线不刷新视图
【发布时间】：2015-11-16 14:06:09
【问题描述】：

我尝试创建一个有角度的应用程序，并且不知何故子状态未加载。

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

当我访问页面时

/users/user/55d8b1c706387b11480d60c1

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

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

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

有什么想法吗？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

Please read this DOC

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

您可以添加抽象状态user，不带url，空模板<ui-view></ui-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");
    }
});

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

【讨论】：