angular.js directive with isolate scope

Question

I know there are already a lot of questions about this topic but I can't make my example work.

See the example at plnkr.co#ua32dkF7fz6X2fA0ZAw3.

Each teaser has some additional informations that should appear when a user clicks on one of the teasers. However as soon as I click on one of the teasers the additional informations appear below every teaser. I'd like to show them only below the one teaser that I clicked on.

I'm pretty sure that's happening because the directives share the same parent scope. How can I keep the isActive variable private to each teaser?

Yoshi · Accepted Answer · 2013-02-13 14:05:25Z

5

I would do it like this:

1) html changes:

<teaser ng-repeat="teaser in teasers" teaser="teaser"></teaser>

2) changes to the directive:

restrict: 'E',
replace: true,
scope: {
  teaser: '='
},
controller: function ($scope) {
  $scope.isActive = false;
  $scope.select = function(teaser) {
    $scope.isActive = !$scope.isActive;
  };
}

demo: http://jsbin.com/aqehew/1/

answered Feb 13, 2013 at 14:05

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

2 Comments

zemirco Over a year ago

just one more thing: why did you use the controller and not the link function?

Yoshi Over a year ago

I tend to use a controller, when: not using $watch or when using an isolated scope.

Anders Ekdahl · Accepted Answer · 2013-02-13 14:04:54Z

1

This should do it: http://plnkr.co/edit/EfB3n14Hwk5uijsrp1aR

What I did was to create a new scope for the directive, and moved the active variable to the directive scope.

answered Feb 13, 2013 at 14:04

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

1 Comment

zemirco Over a year ago

Thanks for your answer. I might be wrong but I think @Yoshi's answer is more angular style.

Collectives™ on Stack Overflow

angular.js directive with isolate scope

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related