CODEWITHSUNDEEP
javascriptangularjs
Vesko Vujovic
Vesko Vujovic

Reputation: 400

Why i should use isolated scope directives in AngularJS?

I'm wondering why i should use isolated scope directives? I can always get some data with service inside my controller and those data will be available inside directive that don't have isolated scope, if i want to use that directive in other place, i can just send request and get the data.... Right?

When you create directive with isolated scope, you must get the data and pass it to directive..

What is the advantage of using isolated scope directives?

Why i should use it and when?*

Upvotes: 2

Views: 954

Answers (2)

LionC
LionC

Reputation: 3106

Because it makes your directive an own module(design-wise, Im not talking about angular.modules ;-) with a clear defined self-contained interface, which means that it is reusable in any context. It also makes its code readable, as everything that the directive works with is in the directives code and not in some magic parent scope that it relies on. Lets look at an example without an isolated scope:

Controller:

angular.module("carShop",[])
.controller("CarStorefrontController",function(){
    //For simplicity
    this.cars = [
        { name: 'BMW X6', color: 'white' },
        { name: 'Audi A6', color: 'black' } 
    ];
});

Directive:

angular.module("carShop")
.directive("carList",function(){
    return {
        template: ['<ul>',
                       '<li ng-repeat="car in vm.cars">',
                       'A {{car.name}} in shiny-{{car.color}}',
                       '</li>',
                   '</ul>'].join("")
    };
});

Page:

<div ng-app="carShop" ng-controller="CarStorefrontController as vm">
    <h2>Welcome to AwesomeCarShop Ltd. !</h2>
    <p>Have a look at our currently offered cars:</p>
    <car-list></car-list>
</div>

This works, but is not reusable. If I want to display a list of cars somewhere else in my application, I need to rename my controller there to vm and have it have a field named cars containing my array of cars for it to work. But if I change my directive to

angular.module("carShop")
.directive("carList",function(){
    return {
        scope: { cars: '=' },
        template: [ /* same as above */ ].join("")
    };
});

and change <car-list></car-list> on my storefront page to <car-list cars="vm.cars"></car-list>", I can reuse that directive everywhere by just passing in any array of cars without caring where that array came from. Addiionally, I can now replace my Controller on the storefront page with a completely different one, without having to change my directive definition(and without changing all the other places where I use car-list).

It really comes down to the same reason why you should not put all your javascript variables into one global scope so they are easily accessible from everywhere: reusability, readability, maintainability - that is what you get by modularizing and encapsulating your code, by going for low coupling and high cohesion following the black-box-principle.

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

Directive with isolated scope basically used when you want to create a component that can be reusable throughout your app, so that you can use it anywhere on you angular module.

Isolated scope means that you are creating a new scope which would not be prototypically inherited from the parent scope. But you could pass values to directive that you want to required from the parent scope. They can be pass in the various form through the attribute value, there is option that you can use scope: {} to make directive as isolated scope.

  1. @ - Means interpolation values like {{somevalue}}
  2. = - Means two way binding with parent scope variable mentioned in attribute {{somevalue}}
  3. & - Means you can pass method reference to directive that can be call from the directive

Isolated scope created by using $scope.$new(true); where $scope is current scope where the directive tag is placed.

As your saying, you are going to store data in Service, rather than make an isolated scope. But this approach never going to work for you as service is singleton thing which is having only one instance. If you want to use your directive multiple times then you need to make another variable in service that would take the data required for other element. If that directive count increased to 10, then think how you service will look like, that will look really pathetic.

By using isolated scope, code will look more modularize, code re-usability will be improved. Isolated scope variables never going to conflict with the other variables which is of same name in parent scope.

Upvotes: 0

Related Questions