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
– micronyks, Commented Jul 18, 2014 at 17:02
You might want to show the HTML templates for these views. Or better, create a plunkr/jsfiddle. — Sunil D.
– Sunil D., Commented Jul 18, 2014 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
– Cito, Commented Jul 18, 2014 at 18:01

lpiepiora · Accepted Answer · 2014-07-18 18:54:46Z

1

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.

answered Jul 18, 2014 at 18:54

lpiepiora

13.8k1 gold badge39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML not being parsed to view - angular.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related