Question

我的旧代码工作得很好：

$urlRouterProvider.otherwise('/next');
$stateProvider
    .state('next', {
        url: '/next',
        templateUrl: 'partials/next.html',
        controller: function($scope, $state){

        }
    });

但后来我有了更好的组织代码的好主意，所以我最终得到了：

$urlRouterProvider.otherwise('/next');
$stateProvider
    .state('app', {
        abstract: true
    })
    .state('app.next', {
        url: '/next',
        templateUrl: 'partials/next.html',
        controller: function($scope, $state){

        }
    });

这基本上是一回事，但是使用点符号和抽象状态（并不重要;即使我删除抽象状态，它仍然无法工作）。

该应用确实将我转到/next，但该页面为空白（仅显示基本模板，而不是/partials/next.html的内容。已提出请求，但它是＆＃39;根本没有显示。

相关的HTML代码只是：

<div class="container" ui-view>

</div>

我（有点）遵循https://scotch.io/tutorials/angular-routing-using-ui-router的教程，如果这有帮助的话。

我做错了什么？

Answer 1

添加抽象状态属性：

template : '<div ui-view></div>'

应该看起来像：

$urlRouterProvider.otherwise('/next');
$stateProvider
    .state('app', {
        abstract: true,
        template : '<div ui-view></div>'
    })
    .state('app.next', {
        url: '/next',
        templateUrl: 'partials/next.html',
        controller: function($scope, $state){

        }
    });

当然您可以使用templateUrl intead template。在抽象状态下使用布局模板也非常有用。

编辑以回答评论：

我可以问为什么这是必要的吗？

这是必要的，因为角度运行第一个抽象状态，以及它的模板。然后你的实际状态。但是角度需要知道将正常状态模板的内容放在父抽象状态模板中的位置。

这个template : '<div ui-view></div>'表示抽象状态具有简单模板，只有正常状态模板的位置。

在状态名称中使用点表示法时，Angular + UI路由器会中断

1 个答案: