HTML not being parsed to view - angular.js

Question

I have this code:

angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
    $stateProvider
    .state("member", {
        url: "/member",
        abstract: true
    })
    .state("member.list", {
        url: "/list",
        views: {
            "" : {
                templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
                controller: 'MemberController'
            }
        }
    });
});

If I change it to:

angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
    $stateProvider
    .state("member", {
        url: "/member/list",
        views: {
            "" : {
                templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
                controller: 'MemberController'
            }
        }
    });
});

And I do

$state.go("member");

It works ok. Loads the html and parse it to the main view, but with the first version and doing

$state.go("member.list");

It does not parse the html to the main view. It does load the html (I can see it at the debugger) but the html is not placed at the view. What am I doing wrong?

EDIT 1

I found this but this is not really helpful, because I'm doing it programmatically, not with html :(

EDIT 2

Fiddle not working: http://jsfiddle.net/8ET4L/

Fiddle working: http://jsfiddle.net/FFx95/

EDIT 3 Fix:

angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
    $stateProvider
    .state("member", {
        url: "/member",
        abstract: true,
        template: "<div ui-view />"
    })
    .state("member.list", {
        url: "/list",
        views: {
            "" : {
                templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
                controller: 'MemberController'
            }
        }
    });
});

change url: "/member" to url: "/member/list". have you tried this? — micronyks, Jul 18 '14 at 17:02
You might want to show the HTML templates for these views. Or better, create a plunkr/jsfiddle. — Sunil D., Jul 18 '14 at 17:06
@micronyks yes... it does not work either :( And, I can tell it is working because it does load the html (ajax request). The problem is it does not parse it into the view SunilD. Imagine the html template has only a div. — Cito, Jul 18 '14 at 18:01

score 1 · Accepted Answer · answered Jul 18 '14 at 18:54

As documentation says:

Remember: Abstract states still need their own <ui-view/> 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/>".

Which means you have to have:

<div ng-app="App" ng-controller="AppCtrl">
    <div ui-view>
       <div ui-view>
        this is the main view
       </div>
    </div>
</div>

in your fiddle. See my updated example.

Alternatively you can declare it on the state definition:

.state("member", {
    url: "/member",
    abstract: true,
    template: "<div ui-view/>"
})

See another fiddle.

HTML not being parsed to view - angular.js

1 Answers1