AngularJS Isolated Scopes



  • A new “isolate” scopes is created for the directive’s element.
  • An “isolate” scope does not prototypically inherit from its parent scope.
  • The scope option is used to create an isolate scope.
  • An “isolate” scope is valuable when creating reusable components, which should not incidentally read or alter data in the parent scope.
  • As the name recommends, the isolate scope of the directive isolate everything except models that you have explicitly added to the scope: {} hash object.

Sample coding for Isolate Scope in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <h2>Wikitechy Isolate Scope in AngularJS</h2>
        <div ng-app="myApp" ng-controller="Controller">
            <myfriend information="adam"></myfriend></br>
            <myfriend information="angel"></myfriend>
        </div>
        <script>
            var app= angular.module('myApp', [ ]);
            app.controller('Controller',[ ‘$scope’,  function($scope) {
              $scope.adam = { name: 'Adam', age:32, city: 'London' }; 
              $scope.angel = { name: 'Angel', age:21, city: 'New York' };  
            }])
            .directive('myfriend', function() {
               return {
                  scope: {
                   friendInfo: '=information'
                  },
                  template:'Name: {{friendInfo.name}} Age: {{friendInfo.age}} 
                   City: {{friendInfo.city}}'
               };
            });
        </script>
    </body>
</html>

Code Explanation for Isolate Scope in AngularJS:

Code Explanation for AngularJS Isolated Scopes

  1. AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
  2. The AngularJS application is defined by ng-app="myApp". The application runs inside the <div> tag. It’s also used to define a<div> tag as a root element.
  3. The ng-controller=”Controller” is an AngularJS directive. It is used to define a controller name as “Controller”.
  4. <myfriend information=”adam”> here, myfriend is an our own directive name and this element is used to binds the information attribute to “adam” which we have exposed on our controller’s scope.
  5. <myfriend information=”adam”> here, myfriend is an our own directive name and this element is used to binds the information attribute to “angel” which we have exposed on our controller’s scope.
  6. angular.module function is used to create a module. Here we have passed an empty array to it.
  7. Here we have declared a controller “Controller” module using apps.controller() function. The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to apps.controller during its constructor definition.
  8. Here we have set the value of object are $scope.adam and $scope.angel.
  9. .directive is used to create an our own directive with the name of “myfriend”
  10. scope: { friendInfo: '=information' }, here scope option is an object that contains a property for each isolate scope binding. In this example, it has just one property. Its name “friendInfo” is link to the directive’s isolate scope property, friendInfo. Its value “=information” tells $compile to bind to the information attribute.
  11. Here the template directive is used to access our scope and bind the data to our own directive.

Sample Output for Isolate Scope in AngularJS:

Sample Output for AngularJS Isolated Scopes

  1. The output displays a data from controller by using isolation scope.


Related Searches to angularjs Introduction