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).

angular onload Examples

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, pakainfo_function is called every time the partial view is loaded(Angularjs onLoad vs ng-ini).

Read Also:  jquery radio button checked

<div ng-include="pakainfoViewUrl" onload="pakainfo_function()"></div>

Whereas, in this following case, pakainfo_function is called only once when the parent view is loaded.
<div ng-include="pakainfoViewUrl" ng-init="pakainfo_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.

Read Also:  ng-minlength using Angular Example

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="pakainfoA = 1">{{ pakainfoA }}</span>
<span ng-init="pakainfoB = 2">{{ pakainfoB }}</span>

Example of onload : Angularjs page load

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

Example of Angular ng-init : Angularjs page load

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

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

Read Also:  Laravel 6 Pagination Link Customizations Example

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  ng-mouseup Event using Angular Example
  2. Read Also:  JavaScript Remove Duplicate values from Array
  3. Read Also:  Ad Rotate Text Animation Effects using jQuery
  4. Read Also:  call javascript function from html using onclick
  5. Read Also:  Angularjs recaptcha v2 (google Invisible reCAPTCHA v2)
  6. Read Also:  How to Submit a Form Using jQuery?
  7. Read Also:  JavaScript Array Methods tips, tricks and examples
  8. Read Also:  country state city drop down list using JavaScript
  9. Read Also:  Ad Rotate Text Animation Effects using jQuery
  10. Read Also:  Laravel 6 Pagination Link Customizations Example