How does isolate scope work in angularjs?

Question

I have a problem in understanding the scope : {}. Below is the code sample i am working on. Why does it always print in console "strength" instead of its corresponding array value.

// Code goes here

var app = angular.module("superApp", []);

app.directive("superhero", function() {
    return {
        restrict: "E",

        controller: function($scope) {
        $scope.abilities = []

        this.addStrength = function() {
            $scope.abilities.push("strength")
        }

        this.addSpeed = function() {
            $scope.abilities.push("speed")
        }

        this.addFlight = function() {
            $scope.abilities.push("flight")
        }
    },

    link: function(scope, element) {
        element.addClass("button");
        element.bind("mouseenter", function() {
            console.log(scope.abilities);
        })
    }
  }
});

Below is the entire working code. http://plnkr.co/edit/jv2xZRvx4X8IcjKKkiXU?p=preview

It always prints "strength", regardless of the hover. The moment i add scope: {}, it prints its corresponding values.

I am not understanding here, is what does the scope: {} do the magic here?. What is isolated here? I am totally confused here.

Isolate Scope - scope: {} isolates the outer scope from the inner scope, in a sense that your directive only has access to aliased variables passes explicitly to it. Read about it directly in the documentation — New Dev
– New Dev, Commented Dec 22, 2014 at 3:25

Shomz · Accepted Answer · 2014-12-22 03:36:31Z

2

This is the problem:

$scope.abilities = [];

Without isolate scope, you're clearing the common abilities list every time you instantiate the controller - and it gets instantiated once for each directive.

See what happens when you don't overwrite the abilities: http://plnkr.co/edit/5MJSXYogsuoVAbyQTiA5?p=preview. Still not good - they pile up. That's why isolate scope should be used, so that no scope properties are inherited from parent controllers: http://plnkr.co/edit/2zh5923hS6MRM2jczIKv?p=preview

This video might help you understand isolate scopes better along with the official docs (you'll see the video example is quite similar to yours).

answered Dec 22, 2014 at 3:36

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hjl · Accepted Answer · 2014-12-22 04:18:48Z

1

Without scope: {}, all of your directives are sharing the same scope which means sharing the same scope.abilities, so your last directive strength initializes scope.abilityes = [] and only push 'strength' in.

With scope: {}, every time superhero is loaded with an isolated scope and isolated scope.abilities, so it always keeps the initialization with three elements in.

You can console.log(scope.$id) in directive to check the difference.

answered Dec 22, 2014 at 4:18

hjl

2,8023 gold badges20 silver badges26 bronze badges

2 Comments

Shane Over a year ago

So, without scope : {}, superhero directive is shared thrice to other directives with same scope and with scope: {}, the superhero directive is shared thrice other directives with individual scopes.

hjl Over a year ago

Exactly, and to be more specified, 'share' means you 'require' some other directive in current directive.

Collectives™ on Stack Overflow

How does isolate scope work in angularjs?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related