Question

在我的Angular应用程序中，我有以下路由结构：

.state('mapping', {
    url: '/mapping',
    templateUrl: 'app/components/mapping/mapping.html',
    controller: 'MapCtrl as map',
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '',
    templateUrl: 'app/components/mapping/partials/all.html',
    authenticate: true
})
.state('mapping.project', {
    url: '/:projectName',
    templateUrl: 'app/components/mapping/partials/project.html',
    controller: 'ProjectCtrl as proj',
    authenticate: true
})

访问mapping状态时，默认情况下会加载mapping.all。它基本上显示了一个链接到mapping.project状态的项目列表，如下所示：

<a ui-sref="mapping.project({projectId: project.id, projectName: project.name})">...</a>

我想在访问ProjectCtrl时调用mapping.project以加载必要的数据，但它甚至从未被加载。在下面仅包含相关数据的代码段中，alert消息永远不会弹出：

angular
    .module('watera')
    .controller('ProjectCtrl', Controller);

Controller.$inject = ['$stateParams', 'UserFactory', 'ProjectFactory'];

function Controller($stateParams, UserFactory, ProjectFactory) {
    var proj = this;

    activate();

    function activate() {
        alert('1');
    }
}

js文件已正确链接，控制器名称正确。 <div ui-view></div>元素位于mapping.html内，如下所示：

<div id="ribbon" class="no-print">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <strong>Mapping</strong>
                <p class="text-muted">In this section...</p>
            </div>
        </div>
    </div>
</div>

<div ui-view></div>

为什么这个控制器没有加载？

编辑：它变得更奇怪，我将结构切换为：

.state('mapping', {
    url: '/mapping',
    templateUrl: 'app/components/mapping/mapping.html',
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '',
    templateUrl: 'app/components/mapping/partials/all.html',
    controller: 'MapCtrl as map',
    authenticate: true
})
.state('mapping.project', {
    url: '/:projectName',
    templateUrl: 'app/components/mapping/partials/project.html',
    controller: 'ProjectCtrl as proj',
    authenticate: true
})

虽然MapCtrl仍然正常工作，但ProjectCtrl仍然没有。

Answer 1

发现问题......此项目中有ProjectCtrl的两个实例：

显然，这会导致某种静默冲突，因为绝对没有控制台错误。由于第二个实例也链接在index.html，之后我想要加载的实例，它可能只是替换了正确的版本。调试噩梦。

现在修复。

Answer 2

根据定义，抽象状态不可能存在，因此拥有父级和子级的模板URL（由于子级定义了自己的模板，因此不会继承父级的模板URL）是非常可疑的IMO。

我也想知道是否有区别之间的麻烦...... 网址：＆＃39;＆＃39; 和 url：＆＃39; /：projectName＆＃39;

（虽然它应该处理区别）。但是，为了确保我建议一步一步的方法。点击我建议的以下映射，然后从那里加强...

.state('mapping', {
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '/',
    templateUrl: 'app/components/mapping/partials/all.html',
    controller: 'MapCtrl as map',
})
.state('mapping.project', {
    url: '/project/:projectName',
    templateUrl: 'app/components/mapping/partials/project.html',
    controller: 'ProjectCtrl as proj',
})

Angular ui-router：未调用子状态控制器

2 个答案: