Separate toggle div in angularjs

Question

Here is the fiddle: http://jsfiddle.net/yFyxL/2/

angular.module("myApp", []) //
.controller('MainController', function($scope) {
    $scope.toggle1 = function() {
        $scope.$broadcast('event:toggle');
    }
    $scope.toggle2 = function() {
        $scope.$broadcast('event:toggle');
    }
}) //
.directive('toggle', function() {
    return function(scope, elem, attrs) {
        scope.$on('event:toggle', function() {
            elem.slideToggle();
        });
    };
});

So clicking on toggle1 or toggle2 will open both container at the same moment. But I want to toggle them independently. How can I achieve this?

you should be using isolated scopes for this

Ajay Singh Beniwal
– Ajay Singh Beniwal

2013-04-29 07:00:12 +00:00
Commented Apr 29, 2013 at 7:00 — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Apr 29, 2013 at 7:00

joakimbl · Accepted Answer · 2013-04-29 07:13:27Z

2

You have to do something to separate the events. You can provide some additional data in the broadcast:

angular.module("myApp", []) //
.controller('MainController', function($scope) {
    $scope.toggle1 = function() {
        $scope.$broadcast('event:toggle','1');
    }
    $scope.toggle2 = function() {
        $scope.$broadcast('event:toggle','2');
    }
}) //
.directive('toggle', function() {
    return function(scope, elem, attrs) {
        scope.$on('event:toggle', function(ev,id) {
            if(attrs.toggle === id){ elem.slideToggle(); }
        });
    };
});

<div class="div1" toggle="1">
  <p>This is section #1</p>
</div>
<div class="div2" toggle="2">
  <p>This is section #2</p>
</div>

See my fork: http://jsfiddle.net/vBzkV/

answered Apr 29, 2013 at 7:13

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Separate toggle div in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related