Angularjs onLoad vs ng-ini – Angularjs Difference between onLoad and ng-init

Angularjs onLoad vs ng-ini – Angularjs Difference between onLoad and ng-init

In this post we will show you Angularjs onLoad vs ng-ini – Angularjs Difference between onLoad and ng-init. hear we will show you difference between onLoad and ng-init(Angularjs onLoad vs ng-ini).

ng-init in Angularjs :: ng-init should use for only aliasing, ng-init SHOULD NOT be used for any initialization.

onload in Angularjs :: onload should be used if any expression needs to be evaluated after a partial view is loaded (by ng-include).

Angularjs onLoad vs ng-ini :: The major AND most important difference between onLoad and ng-init is when used with ng-include.

In this following case, onlinecode_function is called everytime the partial view is loaded(Angularjs onLoad vs ng-ini).

<div ng-include="onlinecodeViewUrl" onload="onlinecode_function()"></div>

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

<div ng-include="onlinecodeViewUrl" ng-init="onlinecode_function()"></div>

The ng-init operate as shown in over code wont work as is. The operate outlined in ng-int ought to be within the angular context. over focusOnInput() is not within the angular context . It’s in javascript context.

if we wish to use ng-init we will need to inject $window into over controller then use assign focusOnInput to over $scope and use that methodology in ng-init.

ng-init could be a directive that may be placed within div, span, other(html tags), whereas onload is an attribute specific to the ng-include directive that functions as an ng-init. to envision what I mean attempt one thing like:

<!-- Angularjs onLoad vs ng-ini -->
<span onload="onlinecodeA = 1">{{ onlinecodeA }}</span>
<span ng-init="onlinecodeB = 2">{{ onlinecodeB }}</span>

Example of onload : Angularjs page load

<body onload="onlinecodefocusOnInput()">
   <form name="passwordResetForm">
	  <input name="UserNewPassword" type="password"/>
   </form>
</body>
<script>
   function onlinecodefocusOnInput() {
	  document.forms["passwordResetForm"]["UserNewPassword"].focus();
   }
</script>

Example of Angular ng-init : Angularjs page load

<body in-init="onlinecodefocusOnInput()">
   <form name="passwordResetForm">
	  <input name="UserNewPassword" type="password"/>
   </form>
   <script>
	  function onlinecodefocusOnInput() {
		 document.forms["passwordResetForm"]["UserNewPassword"].focus();
	  }
   </script>
</body>

we will see that only the second shows up for Angularjs onLoad vs ng-ini.

An isolated scope could be a scope that doesn’t prototypically inherit from its parent scope.

In laymen’s terms if you’ve got a gismo that does not got to scan and write to the parent scope arbitrarily then you utilize an isolate scope on the gismo in order that the gismo and gismo instrumentation will freely use their scopes while not predominant every other’s properties.

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  59  =  63

We accept paid advance and paid guest Posting on our Site : Contact US