CODEWITHSUNDEEP
angularjs
Jay Shukla
Jay Shukla

Reputation: 5826

Difference between onLoad and ng-init in angular

I am learning angular. I don't understand what is difference between onLoad and ng-init for initialization of a variable. In which scope it creates this variable.

For example

<ng-include onLoad="selectedReq=reqSelected" src="'partials/abc.html'"></ng-include>

OR

<ng-include ng-init="selectedReq=reqSelected" src="partials/abc.html"></ng-include>

Please also give me some idea about isolated scope.

Upvotes: 40

Views: 150155

Answers (3)

Mikhail Malakhvei
Mikhail Malakhvei

Reputation: 117

Works for me.

<div ng-show="$scope.showme === true">Hello World</div>
<div ng-repeat="a in $scope.bigdata" ng-init="$scope.showme = true">{{ a.title }}</div>

Upvotes: 0

aaa
aaa

Reputation: 1124

From angular's documentation,

ng-init SHOULD NOT be used for any initialization. It should be used only for aliasing. https://docs.angularjs.org/api/ng/directive/ngInit

onload should be used if any expression needs to be evaluated after a partial view is loaded (by ng-include). https://docs.angularjs.org/api/ng/directive/ngInclude

The major difference between them is when used with ng-include. 

<div ng-include="partialViewUrl" onload="myFunction()"></div>

In this case, myFunction is called everytime the partial view is loaded.

<div ng-include="partialViewUrl" ng-init="myFunction()"></div>

Whereas, in this case, myFunction is called only once when the parent view is loaded.

Upvotes: 26

Jesus is Lord
Jesus is Lord

Reputation: 15399

ng-init is a directive that can be placed inside div's, span's, whatever, whereas onload is an attribute specific to the ng-include directive that functions as an ng-init. To see what I mean try something like:

<span onload="a = 1">{{ a }}</span>
<span ng-init="b = 2">{{ b }}</span>

You'll see that only the second one shows up.

An isolated scope is a scope which does not prototypically inherit from its parent scope. In laymen's terms if you have a widget that doesn't need to read and write to the parent scope arbitrarily then you use an isolate scope on the widget so that the widget and widget container can freely use their scopes without overriding each other's properties.

Upvotes: 52

Related Questions