Angular ui-router:未调用子状态控制器 [英] Angular ui-router: child state controller not getting called

问题描述

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

.state('映射', {网址:'/映射'，templateUrl: 'app/components/mapping/mapping.html',控制器:'MapCtrl 作为地图'，摘要:真实，验证:真实}).state('mapping.all', {网址:'',templateUrl: 'app/components/mapping/partials/all.html',验证:真实}).state('mapping.project', {url: '/:projectName',templateUrl: 'app/components/mapping/partials/project.html',控制器:'ProjectCtrl 作为项目'，验证:真实})

当访问 mapping 状态时，mapping.all 默认加载.它基本上显示了链接到 mapping.project 状态的项目列表，如下所示:

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

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

角度.module('watera').controller('ProjectCtrl', Controller);Controller.$inject = ['$stateParams', 'UserFactory', 'ProjectFactory'];功能控制器($stateParams，用户工厂，项目工厂){var proj = 这个；启用();功能激活(){警报('1')；}}

js 文件链接正确，控制器命名正确.<div ui-view></div> 元素放置在 mapping.html 中，如下所示:

<div class="container-fluid"><div class="row"><div class="col-xs-12"><strong>映射</strong><p class="text-muted">在本节中...</p>

<div ui-view></div>

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

它变得更奇怪，我将结构切换为:

.state('映射', {网址:'/映射'，templateUrl: 'app/components/mapping/mapping.html',摘要:真实，验证:真实}).state('mapping.all', {网址:'',templateUrl: 'app/components/mapping/partials/all.html',控制器:'MapCtrl 作为地图'，验证:真实}).state('mapping.project', {url: '/:projectName',templateUrl: 'app/components/mapping/partials/project.html',控制器:'ProjectCtrl 作为项目'，验证:真实})

虽然 MapCtrl 一直正常工作，但 ProjectCtrl 仍然没有.

解决方案

发现问题...本项目中有两个ProjectCtrl实例:

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

现已修复.

In my Angular app, I have the following route structure:

.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
})

When accessing the mapping state, mapping.all loads by default. It basically shows a list of projects which link to the mapping.project state, as such:

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

I want to call the ProjectCtrl when I access mapping.project in order to load the necessary data, but it never even gets loaded. In the snippet below which includes only relevant data, the alert message never pops up:

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

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

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

    activate();

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

The js file is correctly linked and the controller is named correctly. The <div ui-view></div> element is placed within mapping.html, as seen below:

<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>

Why is this controller not loading?

EDIT: It gets weirder, I switched the structure to:

.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
})

And while MapCtrl keeps working correctly, ProjectCtrl still doesn't.

解决方案

Found the issue... There were two instances of ProjectCtrl in this project:

Apparently, this causes some sort of silent conflict because there was absolutely no console error. Since the second instance was also linked on index.html, after the one that I wanted to load, it was probably simply replacing the correct version. Debugging nightmare.

Fixed now.

这篇关于Angular ui-router:未调用子状态控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！