CODEWITHSUNDEEP
angularjsangular-ui-router
garyM
garyM

Reputation: 892

AngularUI Router: nested state not launching controller

I'm using Angular and ui-router. I can't get a nested controller to launch, but if the state is not nested, the controller launches.

The URL is generated from the DnaNodeListCtrl template. The template generates what looks like a correct URL: http://localhost:8080/#/v1/dnanodes/a9bfd497-ce6b-4832-909e-506a9b29e46e

My code is below. Why can't I launch a nested controller?

config.js:

var dnaMgrApp = angular.module('dnaMgrApp', [
     'ngRoute',
     'ui.router',
     'dnaMgrControllers',
     'dnaMgrRestService'
]);


dnaMgrApp.config(function($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/");
    //
    // Now set up the states
    $stateProvider
        .state('nodeList', {
            url: "/",
            templateUrl: 'templates/dnaNodeList.html',
            controller: 'DnaNodeListCtrl'
        })
        .state('nodeList.nodeDetail', {
            url: "v1/dnanodes/:nodeId",
            templateUrl: 'templates/dnaNodeSummary.html',
            controller: function($scope){
                $scope.title = 'My DNA';}
        });
});

Template:

<div id="body-container" >
    </div><div id="tablediv">
        <div  ng-repeat="node in dnaNodes">
            <div class="dnanode">
                <a ui-sref="nodeList.nodeDetail({nodeId:node.id})">
                    <table>
                        <tr><td>{{node.geneName}}</td><td><img src="{{node.statusIcon}}"></td></tr>
                        <tr><td colspan="2">2 DNA Pathways</td></tr>
                    </table>
                </a>
            </div>
            <br>
        </div>
    </div>
</div>

Upvotes: 1

Views: 319

Answers (2)

user879121
user879121

Reputation:

The parent template needs to have a place to render the child view. Specifically, the parent template needs to have at least <ui-view/>. This is explained in the Nested States and Nested Views guide.

Upvotes: 0

Nikola Yovchev
Nikola Yovchev

Reputation: 10206

Ui router works in such a way that the nested state needs to have the same url as the parent state + whatever you defined in your nested state.

As in:

if you have a state parent with url : /foo

Then you define a state nested with url: /bar

Then the resulting url you have to have to trigger the nested state is:

/foo/bar

Therefore, you need to add the / in your child url.

Edit Just use that: 

 .state('nodeList.nodeDetail', {
     url: "/v1/dnanodes/:nodeId",
     templateUrl: 'templates/dnaNodeSummary.html',
     //....
 });

Upvotes: 3

Related Questions