Question

这是我的索引页

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-ui-router.js"></script>
    <script src="js/NestedApp.js"></script>
</head>
<body ng-app="customApp">
    Index Level
    <a ui-sref="FirstPage">FirstPage</a>
    <div ui-view></div>

</body>
</html>

这是我的第一页

  <h1>Settings Level</h1>
    <hr />
    <a ui-sref="Firstpage.profile">Profile</a>
    <a ui-sref="Firstpage.account">Account</a>
    <div ui-view></div>

这是我的路线，js

var app = angular.module('customApp', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('FirstPage',
        {
            //url:'/',
            url: '/',

            templateUrl: 'FirstPage.html',

        })
        .state('Firstpage.profile', {
            url:'/profile',
            templateUrl: '../profile.html'

        });

    $urlRouterProvider.otherwise('/FirstPage');
})

第一级路由工作正常

这是第一级路由的网址 http://localhost:59367/app/customIndex.html#/

当我点击个人资料链接时，这是我得到的错误

错误：无法解析＆＃39; Firstpage.profile＆＃39;来自州＆＃39; FirstPage＆＃39;

有人可以帮助我吗

Answer 1

如果您将FirstPage重命名为Firstpage，那么您将不会遇到任何问题。

这是因为UI-Router考虑了FirstPage！= Firstpage

你的新州应该是：

.state('Firstpage',
        {
            //url:'/',
            url: '/',

            templateUrl: 'FirstPage.html',

        })
        .state('Firstpage.profile', {
            url:'/profile',
            templateUrl: '../profile.html'

        });

并且您在root中的ui-sref将更改为：

<a ui-sref="Firstpage">FirstPage</a>

Angular UI Routing嵌套视图无效

1 个答案: