angularjs - ui-router 为什么父状态必须是抽象的

标签 angularjs angularjs-routing

为什么父 View 必须是抽象的才能呈现 subview (嵌套 View )?

$stateProvider
            .state('A', {url: '/A', abstract: true, templateUrl: 'views/A.html'})
            .state('A.B', {url: '', abstract: true, templateUrl: 'views/B.html'})
            .state('A.B.C', {url:'', abstract:false, templateUrl:'views/C.html'});

父 View “A”托管在 home.html 中,如下所示:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Yomingo</title>
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
</head>
<body>
    <div ui-view>
    </div>
<script type="text/javascript" data-main="scripts/main" src="lib/require/require.js"></script>
</body>
</html>

如果任何父状态 'A' 或 'B' 被标记为 abstract=false,则不会呈现 ui-view 内容。

最佳答案

我也遇到过类似的麻烦。

您的三个州都使用相同的 URL,/A:

  • 一个 : '/A'
  • A.B : '/A' + ''
  • A.B.C : '/A' + '' + ''

  • 由于它们定义了 URL,因此将根据您当前的 URL 选择当前状态。您一次只能处于一种状态,因此大概选择的状态是第一个定义的状态。

    如果您将 A 和 A.B 状态抽象化,则它们无法转换为,因此在您浏览到/A 时不会被考虑。因此选择了 A.B.C,继承自 A.B.

    如果您希望一次显示更多的观点,那么我建议您阅读 multiple named views 的文档。以便于跟踪。

    关于angularjs - ui-router 为什么父状态必须是抽象的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16363426/

    相关文章:

    javascript - Angular : Set a default value in ng-repeat if an item's property does not exist

    javascript - AngularJS 如何从一个网站运行两个 Controller ,并更改其中之一

    Angularjs 嵌套状态 : 3 level

    javascript - angularjs,在路由中使用一个函数作为templateUrl

    javascript - ExpressJS 中 AngularJS Controller 发布的身份不明的对象

    angularjs - 在 Angularjs 指令隔离范围内定义函数

    javascript - 验证 angularjs 中的密码指令

    javascript - $locationProvider.html5Mode 不是函数

    angularjs - locationChangeStart 和防止路线改变

    AngularJS $routeProvider : routing does not work