Ng-init via function

Question

As you know, it is possible to initialize objects as follows:

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

Is it possible to define object similar like this but via a function:

<div ng-init="init()">

My aim is actually taking the objects from an API and show them in a list via ng-repeat

Solution 1

The documentation says ng-init will take any expression. So yes, you can do what you want above as long as the associated scope defines a function called init() (and I also verified it for fun).

Note that the documentation says that ng-init is really only intended to be used for aliasing properties inside of an ng-repeat:

The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

Finally, note that you can simply initialize your variables when the controller is created. So there's really no need to use ng-init at all. For example:

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', function($scope){

  $scope.init = function() {
    $scope.a = 'Apples';
    $scope.b = 'Bees';
    $scope.c = 'Zebras';
  };
  // runs once per controller instantiation
  $scope.init();

}]);

Solution 2

So there's really no need to use ng-init at all

Sometimes you would want to initialize something by passing data in the view, which might have its uses in a templated page such as .NET MVC, where you want to pass information from .NET to angular (controller already has the data and the easiest way is to pass this in a ViewBag).

To do this the "correct" way is roundabout, and hard to maintain since you have to embed a script tag with a fixed ID on the page and use javascript/jquery to pull the data into your scope in your controller, again using the hard-coded ID.

Either way breaks (well, kludges) the MVW-pattern of angular, so, I guess, pick your poison.

Comments

[Sunil D.]

Perhaps I should have worded "So there's really no need to use ng-init at all" better. There was no need for the OP to use ng-init in their case.

[PavanSandeep]

This wouldn't work for me. I did the exact same thing. My UI form has ng-models like object.a, object.b, etc... In my controller I have an init function and I have $scope.object.a='myValue', $scope.object.b='myValue' etc.. It says, it cannot find the property a. What am I missing here ?

[Sunil D.]

@SandeepAllampalli Hard to say w/out seeing your code. But if I were to guess, you might need to initialize $scope.object, before you try to set a value on $scope.object.a. $scope.object = {}; $scope.object.a = 'myValue'; Or $scope.object = { a: 'myValue', b: 'myValue' };

[PavanSandeep]

Right, I realized that later and a defined it as a json format, like $scope.object = { a: 'myValue', b: 'myValue' }; and it worked fine :) Thanks for responding though !

[KthProg]

Maybe it would help if they renamed this ng-alias... or ng-assign... as it stands, they named it to be used for exactly what they tell developers not to use it for... getting mixed messages lol

[JustAMartin]

I also found one use case for ng-init when I wanted to load common localized text strings (data validation, global error messages etc.) from the server. I don't want to duplicate my PHP text arrays to JSON files and load them separately through XHR or create a new PHP controller action to return the texts separately. Ng-init seemed a good solution to load the texts at once with the frame of my SPA app and then store these texts to a global i18n Angular service, so they are available throughout my entire app.

[Kat Lim Ruiz]

I use ng-init for simple calculations per each item, for example, show person name I use a function, so it is cleaner code...