I'm having trouble grasping the concept of scope : {}. Here's a snippet of code I've been working on. Why does it always display "strength" in the console instead of the actual 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);
})
}
}
});
Here is the complete code that works properly. http://plnkr.co/edit/jv2xZRvx4X8IcjKKkiXU?p=preview
It consistently displays "strength", no matter what I hover over. When I include scope: {}, it correctly shows the corresponding values.
I'm confused about the significance of scope: {} here. What exactly is being isolated? This is really puzzling me.