angularjs - ui-router rendering ui-views in view templates -

angularjs - ui-router rendering ui-views in view templates -

just checking approach ui-router. sure hitting friction. want 3rd template render within 2nd template - controller not initialized 3rd state unless define ui-view in 1st template.

example code

template 1 rendered mvc view

<div class ="animate-container" ng-app="uirouter-browse"> <div class="products-slide-animate" ui-view="cat1"> <div> <div><a ui-sref="cat1({id:1})">1</a></div> <div><a ui-sref="cat1({id:2})">2</a></div> <div><a ui-sref="cat1({id:3})">3</a><div> </div> </div> </div>

template 2

<div> <div class="row all-categories-wrapper"> <div class="col-xs-12 list-item"> <a href="#/" class="parent"> <i class="chevron-left"></i> <div>all categories </div> </a> </div> </div> </div> <!--want 3rd template render here --> <div ui-view="cat2" class="products-slide-animate" autoscroll="false"> <div class="cat2-wrapper" ng-repeat="cat1 in data.cat1s"> <div class="row"> <div class="col-xs-12 list-item"> <a ui-sref="cat2({id:{{cat1.id}}, name:'{{cat1.urlencodedname}}'})"> <div class="list-item-text">{{cat1.name}}</div> <i class="chevron-right"></i> </a> </div> </div> </div> </div>

template 3

<div> //some content render </div>

my ui-router script

var browse = angular.module('uirouter-browse', ['ui.router', 'nganimate']) .run( ['$rootscope', '$state', '$stateparams', $rootscope.$on('$statechangesuccess', function (event, tostate, toparams, fromstate, fromparams) { console.log(tostate.name); console.log(fromstate.name); } ); }]); browse.config( ['$stateprovider', '$urlrouterprovider', function ($stateprovider, $urlrouterprovider) { $urlrouterprovider .otherwise('/'); $stateprovider .state('cat1', { url: '/cat1/:id?name', views: { 'cat1': { templateurl: '/template1.html', controller: //get info , homecoming } }}) .state('cat2', { url: '/cat2/:id?name', views: { 'cat2': { templateurl: '/template2.html', controller: //get info , homecoming } } }); }]);

most if not of examples see entire ui-view replaced, opposed partially beingness replaced - i.e. rendering of template 3 in ui-view in template 2.

so when click on cat 1 links template 1, transitions next state, controller invoked , animations pretty.

when click on cat2 link, state invoked correctly controller not fired. animate previous view/state.

if place ui-view="cat2" div in template 1 controller fires , template renders. render within ui-view in template2.

thanks

while not sure if suite needs, reason , solution in different state definition, need state nesting. cannot have 2 "totally" independent states, , seek inject 1 another. have create 1 of them parent , 1 child:

current scenario:

$stateprovider .state('cat1', { ... }}) .state('cat2', { ... });

both states in snippet on same "root" level. if nest cat2 cat1 must defined this:

$stateprovider .state('cat1', { ... // parent }}) .state('cat1.cat2', { ... // kid });

that lead url (sub)state cat2 built both parent , own:

#/'/cat1/:id/cat2/:id?name&nameurl',

but if not need parent url part , parameters can utilize absolute url:

.state('cat2', { url: '^/cat2/:id?name',

see:

methods nesting states absolute routes (^)

angularjs angular-ui-router