![未调用子状态控制器]( "未调用子状态控制器")
本文介绍了Angular ui-router:未调用子状态控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的 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:未调用子状态控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！