ng:init and ng:controller

1,997 views
Skip to first unread message

Alkis Evlogimenos ('Αλκης Ευλογημένος)

unread,
Aug 28, 2010, 7:07:22 PM8/28/10
to ang...@googlegroups.com
I have a controller that needs some "arguments". By arguments I mean values coming from the server at page render time. So the html template looks like this:

<div ng:init="foo='baz'; bar=2" ng:controller="MyController">

Thing is I can't use any of foo or bar inside MyController's constructor. Is this by design?

(A rather simple way to have these variables available inside MyController's constructor is to use a template like so:

<div ng:init="foo='baz'; bar=2">
  <div ng:controller="MyController">)

- alkis

Miško Hevery

unread,
Aug 29, 2010, 12:19:49 AM8/29/10
to ang...@googlegroups.com
The issues is that init and controller are of equal precedence and their order of execution is not guaranteed. Having controller after init solves the problem as you have discovered. 

Try this as a workaround

Ng:init="foo=1;$become($window.Controller)"

You can also put initialization code into a regular JavaScript script tag. 

Sent from my iPhone
--
You received this message because you are subscribed to the Google Groups "Angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Alkis Evlogimenos ('Αλκης Ευλογημένος)

unread,
Aug 29, 2010, 9:15:09 AM8/29/10
to ang...@googlegroups.com
Would it make sense to define the order of execution for ng:controller and ng:init?

- alkis


2010/8/29 Miško Hevery <misko....@gmail.com>

Misko Hevery

unread,
Aug 29, 2010, 2:57:33 PM8/29/10
to ang...@googlegroups.com
Not really since one could make argument that one could place a method in the controller which one would then call from the ng:init. In addition the the most ng:* attributes are directives and they execute in undetermined order. angular is not set up to have priority between them, since directives are suppose dot be independent. In your case you want to use ng:init as a way to pass extra parameters to the system, presumably because of some configuration, which your server side templateting system can easily inject. May I suggest this:

<script>
angular.service('myConfiguration', function(){
  return {
    foo:123, // have your templating system change these
    bar: 'abc'
  };
});
</script>
<script>
function MyController(){
  alert(this.myConfiguration.foo);
}
</script>
<body ng:controller="MyController">
</body>

you can then have your server side templating system inject configuration parameters into the myConfiguration service.

-- Misko
2010/8/29 Alkis Evlogimenos ('Αλκης Ευλογημένος) <al...@evlogimenos.com>

Alkis Evlogimenos ('Αλκης Ευλογημένος)

unread,
Aug 31, 2010, 3:30:08 PM8/31/10
to ang...@googlegroups.com
For my current use cases I have only 2-3 variables and those I can easily embed inside another div as I described in the original post. But thanks for the injected configuration hint. I will use that if the list of variables gets hairy.

- alkis

Dinesh P.R.

unread,
Sep 25, 2012, 4:02:59 AM9/25/12
to ang...@googlegroups.com, mi...@hevery.com
Thank you , this is useful, I will try to use this in my project
Reply all
Reply to author
Forward
0 new messages