angularjs - Angular and ui-router state children -
i have state:
}).state('sport', { url: "/:sport", templateurl: '/app/sports/sport.tpl.html', controller: 'sportcontroller', controlleras: 'controller' });
and controller looks this:
.controller('sportcontroller', ['$stateparams', function ($stateparams) { var self = this; // object hold our parameter self.slug = $stateparams.sport; }]);
so, trying pass parameter state. have set this:
.config(['$stateprovider', function ($stateprovider) { // set 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' }); }])
and controller looks this:
.controller('designercontroller', ['$stateparams', 'designerservice', 'httphandler', 'api', function ($stateparams, service, handler, api) { var self = this; var slug = $stateparams.sport; // our slug console.log(slug); }]);
so, there couple of issues here.
- if set link this: ui-sref="sport.designer.team({ sport: controller.slug })" view doesn't move sport state.
- the reason using .team because .designer abstract state , team state default state loads
here html sport state:
<a ui-sref="sport.designer.team({ sport: controller.slug })">test</a>
can see doing wrong?
i got working today. sport state stayed same. changed designer states this:
// set 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' });
and in sport.tpl.html set link up:
<div class="container"> <div class="row"> <div class="col-md-12"> <h1>{{ controler.slug }}</h1> <p>this sport homepage.</p> <p><a ui-sref="designer.team({ sport: controller.slug })">click started</a></p> </div> </div> </div>
and it. designer, did not have child of sport.
Comments
Post a Comment