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

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

但它似乎并不“正确”，因为我需要创建一个模板来保存子状态。

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

Answer 1

好的，回答：

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

不得不说：否。重点是：

Scope Inheritance by View Hierarchy Only

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围的继承   属性与您的状态嵌套无关   与嵌套视图（模板）有关。

完全有可能你有嵌套状态，其模板在各个非嵌套位置填充ui-views   你的网站。在这种情况下，您不能指望访问范围   儿童状态视图中父状态视图的变量。

所以，发生了什么 - 孩子状态 views: {} 定义：

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

...强迫孩子跳过父视图。 不是父州。它跳过父视图。没有父视图，可以从中继承$ scope。

子状态'contact'的视图直接注入root（index.html）ui-view="content"，它不会触发父视图...

所以，使用第二种方法，这是绝对正确的，以实现所期望的

还可以查看这些内容以获取更多详细信息和工作示例：

UI-Router父控制器无法启动

1 个答案:

Scope Inheritance by View Hierarchy Only