AngularJs Directive Isolated Scopes

What is Isolate Scope?

Directives have access to the parent scope by default in AngularJS applications.

WARNING

Since AngularJS is now a deprecated framework, you can use JavaScript modern frameworks like Vuejs, React and Angular, instead.

For example, the following directive relies on the parent scope to write out a customer object’s name and street properties:

Example of Angular Code

angular.module("MyModule").directive("MyDirective", function () {
  return {
    template: "Name: {{ user.name }} Street: {{ user.street }}", // uses interpolation syntax
  };
});

Although this code gets the job done, you have to know a lot about the parent scope to use the directive and could just as easily use ng-include and an HTML template to accomplish the same thing (this was discussed in the first post). If the parent scope changes at all, the directive is no longer useful.

If you want to make a reuseable directive you can’t rely on the parent scope and must use something called Isolate Scope instead. Here’s a diagram that compares shared scope with isolate scope:

Creating an Isolated Scope

Isolating the scope in a directive is a simple process. Start by adding a scope property into the directive, as shown next. It automatically isolates the directive’s scope from any parent scope(s).

Create Isolated Scope

angular.module("MyModule").directive("MyDirective", function () {
  return {
    scope: {},
    template: "Name: {{ user.name }} Street: {{ user.street }}", // uses interpolation syntax
  };
});

@ Scope Property

The @ local scope property is used to access string values that are defined outside the directive. For example, a controller may define a name property on the $scope object, and you need to get access to that property within the directive. To do that, you can use @ within the directive’s scope property. Here’s a high-level example of that concept with a step-by-step explanation:

- A controller defines **$scope.name**. - The **$scope.name** property value needs to be passed into the directive. - The directive creates a custom local scope property within its isolate scope named name (note that the property can be named anything and doesn’t have to match with the **$scope object’s property name**). This is done using scope **{ name: ‘@’ }**. - The **@** character tells the directive that the value passed into the new name property will be accessed as a string. If the outside value changes the name property in the directive’s isolate scope will automatically be updated. - The template within the directive can now bind to the isolate scope’s name property.

Example

angular.module("MyModule").controller("UsersController", [
  "$scope",
  function ($scope) {
    $scope.users = [
      {
        name: "John",
        street: "xxxx Anywhere St.",
      },
      {
        name: "Mike",
        street: "xxxx Crest St.",
      },
      {
        name: "Tom",
        street: "xxxx Main St.",
      },
    ];
  },
]);

///////////////////////////////////////////////////////////////////
angular.module("MyModule").directive("MyDirective", function () {
  return {
    scope: {
      name: "@name",
      street: "@street",
    },
    template: "Name: {{ name }} Street: {{ street }}",
  };
});

Example

<div my-directive name="{{ user.name }}" street="{{ user.street }}"></div>
<!--We've just used Angular Interpolation to change print symbols-->

= Scope Property

The @ character works well for accessing a string value that is passed into a directive as shown in the previous example. However, it won’t keep changes made in the directive in-sync with the external/outer scope. In cases where you need to create a two-way binding between the outer scope and the directive’s isolate scope, you can use the = character. Here’s a high-level example of that concept with a step-by-step explanation:

- A controller defines a **$scope.person** object. - The **$scope.person** object needs to be passed into the directive in a way that creates a two-way binding. - The directive creates a custom local scope property within its isolate scope named customer. This is done using scope **{ customer: ‘=’ }**. - The = character tells the directive that the object passed into the customer property should be bound using a two-way binding. If the outside property value changes then the directive’s customer property should automatically be updated. If the directive’s customer property changes then the object in the external scope should automatically be updated. - The template within the directive can now bind to the isolate scope’s customer property.

Example

angular.module("MyModule").directive("MyDirective", function () {
  return {
    scope: {
      customer: "="
    },
    template: "Customer: {{ customer.name }}",
  };
});

& Scope Property

The & local scope property is used to execute a function expression in the parent scope. This is useful for passing callbacks to a directive.

• A controller defines a function on $scope, e.g., $scope.greet = function(name) { alert('Hello ' + name); };.
• The directive creates a custom local scope property named onGreet using scope: { onGreet: '&' }.
• The & character tells the directive to bind to the parent scope function.
• The directive can call the function using scope.onGreet({ name: 'John' }), which passes data back to the parent scope function.

Example

angular.module("MyModule").directive("MyDirective", function () {
  return {
    scope: {
      onGreet: "&"
    },
    template: '<button ng-click="onGreet({ name: \'John\' })">Greet</button>',
  };
});