javascript - Angular ui 路由器 : child state controller not getting called

标签 javascript angularjs angular-ui-router

在我的 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文件链接正确, Controller 命名正确。 <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>

为什么这个 Controller 没有加载?

编辑:它变得更奇怪,我将结构切换为:

.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还是不行。

最佳答案

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

enter image description here

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

现已修复。

关于javascript - Angular ui 路由器 : child state controller not getting called,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33076944/

相关文章:

javascript - 无法在 HTML 元素上调用函数

javascript - 在html文档中保存javascript对象的实例

javascript - Angular ui-grid 事件 : row selected

angularjs - 如何在不刷新页面(即不使用 browser.get)的情况下使用 $httpBackend (e2e)

javascript - 为什么这里的仪表板状态没有被 $state.go ('dashboard' ... 命中?

javascript - AngularJS 表单没有提交 ng-click 事件

javascript - 如何在此脚本中添加更多标题?

javascript - Angular ng-repeat获取数组中的对象?

html - 如何在angularjs中与小数值一起总和?

angularjs - 如何使用angular ui-router定义url路由的通配符匹配