Single item toggle using angular directives

Question

I have a list of "toggleable" items. When you click on the "toggleable" element, the element expands using ng-show directive. If clicked inside the item stays open, but if you click elsewhere the item contracts.

The way I implemented this is using a directive, that exposes a bound attribute isOpen. The value of isOpen is changed within the directive link function. On element click the value of isOpen is set to true and binds a close function to the $document click event. If clicked outside the element the close function is called, setting isOpen to false and unbinding the document click event.

This works fine for a single instance of this directive, but if two or more instances are introduced, the close function of every element other than the first clicked fails to set the respective isOpen attribute to false.

Here is a Plunker: http://plnkr.co/edit/ZNTRc2uL73kFZJmYOvhh?p=preview

The directive looks like this:

app.directive('myToggle', ['$document', function ($document) {
    var closeToggle = null;
    return {
        restrict: 'A',
        scope: { isOpen: '=myToggle' },
        link: link
    };

    function link(scope, element, attributes) {
        scope.$on('$locationChangeSuccess', function () { if (closeToggle) closeToggle(); });
        element.bind('click', function() {

            closeToggle = function(event) {
                if (event)
                    if (element.parent().find(event.target).length != 0 && scope.isOpen)
                        return false;

                $document.unbind('click', closeToggle);
                scope.$apply(function () {
                    scope.isOpen = false;
                });
                closeToggle = angular.noop;
            };

            if (!scope.isOpen) {
                scope.$apply(function() {
                    scope.isOpen = true;
                });
                $document.bind('click', closeToggle);
            }
        });
    };
}]);


app.directive('myToggleCard', [function () {
    // Usage:
    // 
    // Creates:
    // 
    var directive = {
        link: link,
        restrict: 'E',
        template: '<a data-my-toggle="isOpen" data-ng-show="!isOpen" href="">ClickMe</a><div data-ng-if="isOpen"> Extra Content </div>',
        replace: true,
        scope: {
        }
    };
    return directive;

    function link(scope, element, attrs) {
        scope.isOpen = false;
    }
}]);

and the html looks like this:

<div>
  <div>
      <my-toggle-card></my-toggle-card>
      <my-toggle-card></my-toggle-card>
      <my-toggle-card></my-toggle-card>
      <my-toggle-card></my-toggle-card>  
  </div>
</div>

koolunix · Accepted Answer · 2014-02-11 18:38:14Z

1

In your original plunker, this makes your function have a global scope, thus all elements with this directive were executing it:

closeToggle = function(event) {

If you isolate the scope of this function to just your directive, like this, it will work correctly

var closeToggle = function(event) {

answered Feb 11, 2014 at 18:38

koolunix

1,99516 silver badges25 bronze badges

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

1 Comment

masimplo Over a year ago

Yes this also makes sense as a possible solution. As I recall whatever is declared outside of the directive object (in this case var closeToggle) has a global scope for all instances of the directive per route.

masimplo · Accepted Answer · 2014-02-11 18:16:26Z

Playing around with plunker and remembering an article I was reading a couple of days on scope, hoisting and function declarations it become apparent to me that using a function expression rather than a function declaration might cause the problem.

I am guessing that even though they are declared inside different instances of the same directive the closeToggle function expression gets hoisted to a higher scope and thus is shared between the directives.

Replacing

closeToggle = function(event) {

with

functions closeToggle(event) {

fixes the problem. (Plunker: http://plnkr.co/edit/N6p4eU08dfyLLSeotw5S?p=preview)

I hope I got the reason why this got fixed. I am not 100% sure I got these concepts right yet so another more complete answer is welcome.

Collectives™ on Stack Overflow

Single item toggle using angular directives

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related