嵌套状态的控制器未被执行

Question

我有嵌套状态,父状态和子状态具有单独的控制器.但只有父州才会被执行.

我有网址结构:#/ restaurant/2 /我们的食物

因此,我希望它加载ID为2的餐厅,然后儿童控制器加载"我们的食物"内容并处理其他一些功能.

我的代码是:

var app = angular.module("app", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise("/");

$stateProvider
            .state('home', {
                url: '/',
                controller: function($scope, $stateParams) {
                        $scope.setRestaurant(0);
                }
            })
            .state('restaurant', {
                url: '/restaurant/:restaurantId',
                controller: function($scope, $stateParams, $state) {
                    console.log('first');
                    if($stateParams.restaurantId > 0) {
                        $scope.setRestaurant($stateParams.restaurantId);
                    }
                    else {
                        $state.go('home');
                    }
                }
            })
    .state('restaurant.our-food', {
        url: '/our-food',
        templateUrl: 'templates/our-food.html',
                    controller: function() {
                        console.log('second');
                    }
    });

});

Answer 1

您的'restaurant.our-food'状态的控制器未被执行,因为其父状态没有模板.这意味着它没有ui-view指令来附加自己的模板和控制器.即使你的父指令除了设置某个状态之外没有做任何事情,它也需要提供至少一个最小的模板.

尝试将以下内容添加到"餐馆"状态,看看是否适合您:

template: "<div ui-view />"

这在ui-router文档中有记录:

记住:抽象的状态仍然需要他们自己的孩子插入.因此,如果您使用抽象状态只是为了添加url,设置resolve/data,或运行onEnter/Exit函数,那么您还需要设置模板:<ui-view />'.

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views