angularjs - 处于嵌套状态的 Controller 未执行

Question

我有嵌套状态，父状态和子状态有一个单独的 Controller 。但只有父状态被执行。

我有网址结构:#/restaurant/2/our-food

因此，我希望它加载 ID 为 2 的餐厅，然后子 Controller 加载“我们的食物”内容并处理其他一些功能。

我的代码是:

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' 状态的 Controller 没有被执行，因为它的父状态没有模板。这意味着没有 ui-view指令让它附加自己的模板和 Controller 。即使你的父指令除了设置一些状态之外什么都不做，它至少需要提供一个最小的模板。

尝试将以下内容添加到您的“餐厅”状态，看看它是否适合您:

template: "<div ui-view />"

这记录在 ui-router 文档中:

Remember: Abstract states still need their own for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: <ui-view />'.

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