How can i access to the following binding from the view?

Question

demoApp is my module, very simple. I've followed a nice tutorial where it explains the custom directive creation, but something came out, the isolated scope thing to maintain the scopes isolated.

This is the angularJS code:

demoApp.directive("superhero", function() {
    return {
        restrict: 'E',
        scope: {},
        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);
            })
        }
    }
});

demoApp.directive("strength", function() {
    return {
        require:"superhero", //require superhero controller
        link: function (scope, element, attrs, superheroController) {
            superheroController.addStrength();
        }
    }
});

demoApp.directive("speed", function() {
    return {
        require:"superhero",
        link: function (scope, element, attrs, superheroController) {
            superheroController.addSpeed();
        }
    }
});

demoApp.directive("flight", function() {
    return {
        require:"superhero", 
        link: function (scope, element, attrs, superheroController) {
            superheroController.addFlight();
        }
    }
});

So then in the view I do this:

<superhero flight speed strength>Superman</superhero>
<superhero speed>Flash</superhero>
<superhero strength>Hulk</superhero>

Now, what happens if i want to access to the directive's controller scope of each of these childs? Imagine that i want to use the {{abilities}} binding with its respective properties in the view? Like so:

 <superhero flight speed strength>Superman {{abilities}}</superhero>

How am i supposed to do it? Couldn't figure it out. Should i be using an isolated property? like :

scope: {
   abilities: "&"
},

Thing is that, after reading and reading these isolated scopes, i couldn't understand yet the usage and differences.

UPDATED:

It looks like this is a "bug" from the AngularJS 1.2.3 because in the 1.1.1 version supplied by JSFiddle it works.

Maybe it's supported in a different way? How am i supposed to do this in the 1.2.3 version?

I was able to access `abilities` using your example. http://jsfiddle.net/nordyke/kx7E2/ — nordyke, Dec 03 '13 at 16:00
omg for real, just pasted exactly my same code in the jsfiddle and it worked! but in my htm doesn't work. Other directives did work, now... something must be wrong :S wtf could be angular 1.2.3 issue? JSFiddle uses 1.1.1 mmmmm. — msqar, Dec 03 '13 at 17:31
omg yeah, found it was a 1.2.3 error, with v1.2.3 of AngularJS, the {{abilities}} binding won't work, while with the v1.1.1 from the JSFiddle will work. That's baaaad :'( how do i fix this now? — msqar, Dec 03 '13 at 17:41

score 1 · Answer 1 · answered Dec 03 '13 at 18:25

1

According to the documentation

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-1

I have to set scope: true instead of scope: {}

answered Dec 03 '13 at 18:25

msqar

2,940
5
44
90

1

Good eye. I was breaking my head on why it wasn't working in 1.2+. – nordyke Dec 03 '13 at 19:11
Yeah, actually got some help from Google forum.. what i realized was about the version i was using compared to the one in JSFiddle. – msqar Dec 03 '13 at 19:28

How can i access to the following binding from the view?

1 Answers1