UI-路由器父控制器未启动

Question

我正在为我的应用程序使用 AngularJs UI-Router，但我遇到了父控制器未启动的问题。

这是我的状态结构：

.state('main', {
    abstract: true,
    controller: 'MainController',
    controllerAs: 'vm',
    resolve: {
        config: function($timeout){
            return $timeout(function() {
                return console.log('loaded')
            }, 1000);
        }
    }
})
.state('home', {
    parent: 'main',
    url: '/Home',
    views: {
        'content@': {
            templateUrl: 'view/home.html'
        }
    }
})
.state('contact', {
    parent: 'main',
    url: '/Contact',
    views: {
        'content@': {
            templateUrl: 'view/contact.html',
        }
    }
})

模板 home.html 和 contact.html 在视图上显示得很好。但是在 MainController 里面我只有一个 console.log 但它没有出现在控制台上。

如果我做一些改变，我就能让它发挥作用。这是工作示例：

.state('main', {
    abstract: true,
    views: {
        'main': {
            template: '<div ui-view="content"></div>',
            controller: 'MainController',
            controllerAs: 'vm'
        }
    }
[...code...]

.state('home', {
    parent: 'main',
    url: '/Home',
    views: {
        'content': {
[...code...]

这样，一切都按预期进行，视图出现，控制器的控制台也出现。

但似乎"right" 因为我需要创建一个模板来保存子状态。

有没有办法让它与第一个选项一起使用？

Answer 1

嗯，回答：

... Is there a way to make it work with the first option?

不得不说：NO。重点是：

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

所以，发生的事情是 - child 状态 views: {} 定义：

.state('contact', {
    parent: 'main',    
    views: {
        'content@': {
    ...

... 强制 child 跳过 parent 视图。 不是 parent 状态 。它 跳过 parent 视图 。没有 parent 视图，它可以从中继承 $scope。

一个child状态的视图'contact'，直接注入root(index.html)ui-view="content"，它不会触发 parent 视图...

所以，使用第二种方法，这是完全正确的，达到预期的效果

另请检查这些以获取更多详细信息和工作示例：

How to inherit resolve data in ui-router

UI-路由器父控制器未启动

UI-Router parent controller doesn't initiate

state

angularjs

angular-ui

angular-ui-router

Scope Inheritance by View Hierarchy Only