Question

我尝试使用ui-router来管理单页应用上的嵌套视图。

我想说我想创建一个包含公共区域和多个视图的仪表板应用程序。

主要和嵌套状态的处理方式如下：

    $stateProvider.state('home', {
        url: '/',
        template: 'MY HOME PAGE'
    })
    .state('login', {
        url: '/login',
        templateUrl: '/pages/login.html'
    })
    .state('registration', {
        url: '/registration',
        templateUrl: '/pages/registration.html'
    })
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: '/pages/dashboard/dashboard.html' 
    })
    .state('dashboard.me', {
        url: '/me',
        templateUrl: '/pages/dashboard/me.html'
    })
    .state('dashboard.messages', {
        url: '/messages',
        templateUrl: '/pages/dashboard/messages.html'
    })
    .state('dashboard.friends', {
        url: '/friends',
        templateUrl: '/pages/dashboard/friends.html'
    });

仪表板HTML页面如下：

<div class="container" ng-controller="dashboardCtrl" ng-init="init()">

<h2>DASHBOARD</h2>
<ul>
    <li><a ui-sref="dashboard.me">Me</a></li>
    <li><a ui-sref="dashboard.messages">My Messages</a></li>
    <li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>

<div ui-view></div>

上述HTML也包含在 ui-view 。

中

如果我使用锚点导航我的应用程序，一切正常。顺便说一句，如果我尝试直接转到 myhost / dashboard / me 或 myhost / dashboard / friends （每个具有两级嵌套视图的路径）应用程序都不起作用。我得到一个有角度的（意外的标记＆lt;）但我不认为它是相关的...

似乎无法解析第一级嵌套视图。以下图像显示使用锚点

完成导航时获得的HTML

以及直接从浏览器地址链接调用页面时获得的HTML：

有什么想法吗？感谢。

Answer 1

问题是角度没有加载，因此错误。但是代码对我来说是正确的，除非你错过了

的结束标记

<div class="container" ng-controller="dashboardCtrl" ng-init="init()">

Answer 2

JavaScript状态配置：

let rectShape = CAShapeLayer()
rectShape.bounds = self.name.frame
rectShape.position = self.name.center
rectShape.path = UIBezierPath(roundedRect: self.name.bounds, byRoundingCorners: .TopLeft | .TopRight, cornerRadii: CGSize(width: 20, height: 20)).CGPath
rectShape.backgroundColor = UIColor.blackColor().CGColor

self.name.layer.mask = rectShape

信息中心HTML

    $stateProvider.state('home', {
        url: '/',
        template: 'MY HOME PAGE'
    })
    .state('login', {
        url: '/login',
        templateUrl: '/pages/login.html'
    })
    .state('registration', {
        url: '/registration',
        templateUrl: '/pages/registration.html'
    })
    .state('dashboard', {
        url: '/dashboard',
        abstract: true,
        parent: 'home',
        templateUrl: '/pages/dashboard/dashboard.html'
    })
    .state('dashboard.me', {
        url: '/me',
        views: {
            '@dashboard_view': {
                templateUrl: '/pages/dashboard/me.html'
            }
        }
    })
    .state('dashboard.messages', {
        url: '/messages',
        views: {
            '@dashboard_view': {
                templateUrl: '/pages/dashboard/messages.html'
            }
        }
    })
    .state('dashboard.friends', {
        url: '/friends',
        views: {
            '@dashboard_view': {
                templateUrl: '/pages/dashboard/friends.html'
            }
        }
    });

您可以获得更多详细信息：

Multiple Named Views

Nested States and Nested Views

Angular ui-router嵌套状态从url打开

2 个答案: