angularjs改变状态问题答案

【问题标题】：angularjs changing state issueangularjs改变状态问题
【发布时间】：2017-08-16 12:43:57
【问题描述】：

我的 app.js StateProvider 配置设置如下：

State 'dashboard' 包含侧边栏和顶部导航栏，当dashboard.home 和dashboard.addclient 状态处于活动状态时应该处于活动状态。

app.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
    $stateProvider
        .state('login', {
            url: '/',
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'partials/dashboard.html',
            controller: 'DashboardController'
        })
        .state('dashboard.home', {
            url: '/home',
            templateUrl: 'partials/dashboard.home.html',
            controller: 'HomeController'
        })
        .state('dashboard.addclient', {
            url: '/addclient',
            templateUrl: 'partials/dashboard.addclient.html',
            controller: 'ClientsController'
        })

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
});

问题是当用户点击仪表板页面内的链接时，它会调用一个函数来改变如下状态：

app.controller('DashboardController', function ($scope, $state) {
    $scope.AddClient = function () {
        $state.go('dashboard.addclient');
    }
});

但由于某种原因，它试图调用的 URL 看起来像：

http://localhost/dashboard/partials/dashboard.addclient.html

HTML：

索引包含一个视图，登录将被加载到该视图中：

<body>
    <div id="view" ui-view></div>
</body>

所以当用户登录时，我们在仪表板上有另一个 ui 视图：

<div id="page-content-wrapper">
    <div ui-view></div>
</div>

【问题讨论】：

同时提供您的 HTML
@AKA 我真的不知道您需要什么 HTML，但添加了我认为必要的内容。
您的仪表板状态应该是抽象的。此外，更新问题并向我们展示您的链接。 github.com/angular-ui/ui-router/wiki/…

标签： javascript angularjs

【解决方案1】：

看起来您的模板网址是相对路径，因为它们不以“/”开头。这意味着，如果您的浏览器当前在地址栏中有http://localhost/dashboard，当您将状态更改为dashboard.addclient 时，它只会将您的模板网址附加到当前地址。相反，你可以试试这个：

.state('dashboard.addclient', { url: '/addclient', templateUrl: '/partials/dashboard.addclient.html', controller: 'ClientsController' })

【讨论】：

谢谢！这几天一直在看。