AngularJS init variable with ui-router

Question

When I want to init a variable on first start up of a controller I do this in my view

<div ng-controller="testCtrl" ng-init="<%some var from server %>"> <div>

However, I'm now using ui-router like this:

 .state('index', {

            url: "/",
            templateUrl: "/register-form.html",
            controller: "testCtrl"
        })

Because I no longer render the <div ng-controller= etc how to I still init and pass my <%some var from server %> from the template? register-form.html does not have the controller tag anymore because ui-router takes care of it.

What is the nature of the variable ? It may have some importance, because it might belong to somewhere else. — a-d
– a-d, Commented Feb 4, 2014 at 20:09
@aduch I pass in an ID from server side, its rendered outside AngularJS App so need to somehow be passed in. — Prometheus
– Prometheus, Commented Feb 4, 2014 at 20:14

Eugene P. · Accepted Answer · 2014-02-04 23:22:13Z

5

.state('index', {
    url: "/:id",
    templateUrl: "/register-form.html",
    resolve : {
       id  : function ($http, $stateparams ) {
         var id = '';  
         // resolve id from somewhere, 
         // call to dom hidden field,service/server injection
         return  id; 
       }
    }
    controller: "testCtrl"
});

and a controller :

 .controller('testCtrl', ['id', function(id) {
        //resolved id from state
    }]);

this is another option. if you can't modify url, but want something similar to ng-init. Take a look into resolve function, which takes parameter name id and trying to resolve it, before actual init of controller

hope it will give your some idea.

answered Feb 4, 2014 at 23:22

Eugene P.

2,63521 silver badges23 bronze badges

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

2 Comments

Prometheus Over a year ago

very nice answer thank you. stateparams is not something I can use in my case, but I marked this answer up because in the future this could be a good option. thank you

Eugene P. Over a year ago

yeah. params from function should be defined as you wish, as they are just dependencies, I just posted from my project. :)

Ilan Frumer · Accepted Answer · 2014-02-04 20:26:29Z

2

Just put it on top of your template:

<div ng-init="<%some var from server %>"> <div>

ngInit doesn't depend on ngController, it just initiates a variable on the scope.

answered Feb 4, 2014 at 20:26

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

4 Comments

Prometheus Over a year ago

why was this marked down? would this not work? seems like a good idea. I could then set this into a service making accessible to all controllers? bad idea?

Ilan Frumer Over a year ago

@Spike Of course it would work. a downvote is only one user's opinion, and it's lame if it's not followed by a comment.

Ilan Frumer Over a year ago

@Spike When I write SPA applications, the server side's role is only to serve resources and static assets, and that's also what I recommend as a best practice. In the question you want to inject <%some var from server %> so I showed you how to do so. My general approach to answers is to give scoped answers without trying to refactor the whole architecture unless it's obviously needed. It's not practical to enforce users to think in your way when they already have working applications and only need a little patch.

Mark Over a year ago

If using child views and the ui-router, you can use the ng-init to pass data to the child controller. If for example you use a childview in a ng-repeat, you can pas the current object to the child controller.

a-d · Accepted Answer · 2014-02-04 20:26:15Z

1

As you want to pass an id, I recommend you to pass through url in $stateParams

.state('index', {
    url: "/:id",
    templateUrl: "/register-form.html",
    controller: "testCtrl"
});

in you controller now

.controller('testCtrl', ['$stateParams', function($stateParams) {
    // cast id to an int since it comes from url now
    var id = +$stateParams.id;
}]);

answered Feb 4, 2014 at 20:26

a-d

10.9k2 gold badges34 silver badges50 bronze badges

2 Comments

Prometheus Over a year ago

thats not an option for me I'm afraid. I was hoping its possible to use init for the controller.

Mark Over a year ago

So yes it is possible! For example if you have a child view that has its own controller, you could use the ng-init to pass data to it: <div class="panel-body" ng-repeat="z in projectToPrint.zones"> <div ui-view="zoneDetails@projectsfull" ng-init="zoneToPrint = z"></div></div>

Collectives™ on Stack Overflow

AngularJS init variable with ui-router

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related