javascript - 动态 Controller 未启动

标签 javascript angularjs

关注此帖子AngularJS UI router named views lazy loading ,我想要有多个选项卡,每个选项卡都分配有自己的模板和 Controller ,如下所示:

angular.module('ppApp').config(function($stateProvider){
    $stateProvider
    .state('portfolio.patent', {
        url: '/:patentId',
        controller: 'mainItemCtrl',
        templateUrl: 'app/templates/patent/main.main-item.tpl.htm'
    }
})

angular.module('ppApp').controller('maintItemCtrl', function(){
    var vm = this;
    vm.leftTabs = {
        'tab1': {
            template: 'app/templates/child.sibling1.tpl.htm',
            controller: 'siblingOneCtrl'
        },
        'tab2': {
            template: 'app/templates/child.sibling2.tpl.htm',
            controller: 'siblingTwoCtrl'
        }
    }

});


<uib-tabset active="active">
    <uib-tab ng-repeat="(tabName,tab) in $ctrl.leftTabs" heading="{{tabName}}">
        <div template={{tab.template}} controller="{{tab.controller}}">Loading {{tabName}} ...</div>
    </uib-tab>
</uib-tabset>

我已经为同级 Controller 设置了 Controller ,并且它们已经工作,直到尝试将它们动态加载到选项卡中。尽管没有调用 Controller ,但模板正在加载到 View 中。如果我检查源代码, Controller 指令将两个同级 Controller 作为值。

问题

为什么我的 Controller 没有启动?

最佳答案

我从未尝试过此操作,但这可能是因为表达式的插值发生得太晚,无法访问和影响发生 Controller 构造和初始化的生命周期阶段。

至少,在指令 Controller 中,插值发生在 $postLink 之后,这意味着此时所有子级都已链接,并且在父级的生命周期中声明和声明已经太晚了。实例化新的子 Controller 。

编辑: this is confirmed by the docs:

Controller constructor function. The controller is instantiated before the pre-linking phase and can be accessed by other directives (see require attribute).

关于javascript - 动态 Controller 未启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55732090/

相关文章:

javascript - 未捕获的不变违规 : Maximum update depth exceeded

angularjs - 验证字母输入上的文本

javascript - 显示从 PHP 调用到 angularJS 站点的数据

javascript - 如何在 ng-repeat 中显示下拉菜单

javascript - 过滤AngularJS返回多个元素

javascript - 从 iPhone 上传到 S3 的 jpeg 图像不可读。但适用于 photoshop

javascript - 在 AngularJS ngview 中加载图像后如何执行基础 js 调用?

javascript - 我如何在此模板字符串中创建条件?

javascript - jQuery 代码阻止将产品插入数据库

angularjs - 无法使用 ionic 花式选择指令调用 Angular Controller 中存在的 ionic 无限滚动方法