Angular 和 ui-路由器状态子项

Question

我有这个状态：

}).state('sport', {
    url: "/:sport",
    templateUrl: '/app/sports/sport.tpl.html',
    controller: 'SportController',
    controllerAs: 'controller'
});

控制器看起来像这样：

.controller('SportController', ['$stateParams', function ($stateParams) {
    var self = this;

    // Object to hold our parameter
    self.slug = $stateParams.sport;
}]);

所以，我要做的是将这个参数传递给另一个状态。我是这样设置的：

.config(['$stateProvider', function ($stateProvider) {

    // Set up our state(s)
    $stateProvider.state('sport.designer', {
        url: "/designer",
        abstract: true,
        templateUrl: '/app/designer/designer.tpl.html',
        controller: 'DesignerController',
        controllerAs: 'controller'
    }).state('sport.designer.team', {
        url: "",
        templateUrl: '/app/designer/team.tpl.html'
    }).state('sport.designer.kit', {
        url: "/kit",
        templateUrl: '/app/designer/kit.tpl.html'
    }).state('sport.designer.design', {
        url: "/design",
        templateUrl: '/app/designer/design.tpl.html'
    }).state('sport.designer.refine', {
        url: "/refine",
        templateUrl: '/app/designer/refine.tpl.html'
    }).state('sport.designer.order', {
        url: "/order",
        templateUrl: '/app/designer/order.tpl.html'
    });
}])

控制器看起来像这样：

.controller('DesignerController', ['$stateParams', 'DesignerService', 'HttpHandler', 'Api', function ($stateParams, service, handler, api) {
    var self = this;
    var slug = $stateParams.sport; // Get our slug

    console.log(slug);
}]);

所以，这里有几个问题。

如果像这样设置 link：ui-sref="sport.designer.team({ sport: controller.slug })" 那么视图不会从运动状态.
我使用.team的原因是因为.designer是一个抽象状态，团队状态是加载的默认状态

这是我的 html 运动状态：

<a ui-sref="sport.designer.team({ sport: controller.slug })">Test</a>

谁能看出我做错了什么？

Answer 1

我今天开始工作了。我的运动状态保持不变。我将设计器状态更改为：

// Set up our state(s)
$stateProvider.state('designer', {
    url: ':sport/designer',
    abstract: true,
    templateUrl: '/app/designer/designer.tpl.html',
    controller: 'DesignerController',
    controllerAs: 'controller'
}).state('designer.team', {
    url: '',
    templateUrl: '/app/designer/team.tpl.html'
}).state('designer.kit', {
    url: '/kit',
    templateUrl: '/app/designer/kit.tpl.html'
}).state('designer.design', {
    url: '/design',
    templateUrl: '/app/designer/design.tpl.html'
}).state('designer.refine', {
    url: '/refine',
    templateUrl: '/app/designer/refine.tpl.html'
}).state('designer.order', {
    url: '/order',
    templateUrl: '/app/designer/order.tpl.html'
});

然后在我的 sport.tpl.html 中设置 link：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>{{ controler.slug }}</h1>
            <p>This will be the sport homepage.</p>
            <p><a ui-sref="designer.team({ sport: controller.slug })">Click to get started</a></p>
        </div>
    </div>
</div>

就是这样。设计师，不一定是运动之子。

Angular 和 ui-路由器状态子项

Angular and ui-router state children

angularjs

angular-ui-router