AngularJS ui-router views with custom data

Question

I have an AngularJS app and use the ui-router for routing. One of my pages has two similar sections with the same template and logic (so I hope they can use the same controller). The only difference between them is for example type property. Here is simplified fiddle of the page: http://jsfiddle.net/e_gluhotorenko/XeX59/7/.

So Is it possible to provide custom different data to the views's scopes ? Something like custom data in states but for views:

views: {
    'section1' : {
        templateUrl: 'section.html',
        controller : 'ctrl',
        data : { type: 'type1'}
    },
    'section2' : {
        templateUrl: 'section.html',
        controller : 'ctrl',
        data : { type: 'type2'}
    }
}

Or with ui-view directive like in ng-inclide's onload:

<div ui-view="section1" onload="type = 'type1'"></div>
<div ui-view="section2" onload="type = 'type2'"></div>

Eugene Gluhotorenko · Accepted Answer · 2014-02-22 08:20:06Z

2

Just found out that ui-view actually has onload attribute, it is absent in documentation but is in API ref. So my example from the question works! fiddle

edited Feb 22, 2014 at 8:20

answered Feb 21, 2014 at 18:30

Eugene Gluhotorenko

3,1642 gold badges36 silver badges52 bronze badges

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

Comments

BramSlob · Accepted Answer · 2014-02-20 15:27:18Z

1

Did you try ng-init as in <div ui-view="section1" ng-init="type = 'type1'"></div>? That should work, I would link the angular docs for ng-init, but the site seems to be down right now

answered Feb 20, 2014 at 15:27

BramSlob

111 bronze badge

5 Comments

Eugene Gluhotorenko Over a year ago

I think ng-init should be called in the parent scope, so we just initialize type from parent scope twice. Check this jsfiddle.net/GXLZm/1

BramSlob Over a year ago

@e.gluhotorenko your jsfiddle seems to do what i suggested, to call ng-init on those 2 divs. I merely wrote just one of the two divs. A jsfiddle is always better though, nice!

BramSlob Over a year ago

If the latest jsfiddle does not do what I/you would expect, than I think I don't understand the question. What are you trying to accomplish, if the behavior above is not as expected?

Eugene Gluhotorenko Over a year ago

Look, I need to pass different values to tepmplate1's and tepmplate2's scopes. Both these scopes are inherited from mainscope so that they have access to the type property that was initialized in the main scope so that the tepmplate1's and the tepmplate2's scopes do not have their own type`. Is it clearer now ? :)

Ena Over a year ago

I like the ng-init alternative. In the provided fiddle, if you try to do $scope.someValue = $scope.type; you will find that $scope.type is undefined when you enter the controller. Using ng-init you will see the expected output section type1. Type : type1 section type2. Type : type2

Collectives™ on Stack Overflow

AngularJS ui-router views with custom data

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related