Angular custom dropdown

Question

I'm just started learning angularJS and I wish to build some dropdowns and tabs with bootstrap and angular. I know there is a full angular bootstrap library out there, but I don't want to use it, since I want to know whats going on behind the scenes. So I'm trying to build the needed dropdown functionality, but haven't been able to do so. The problem is:

I have to click the dropdown if its opened before it can disappear again. I wish to be able to click / touch anywhere but the dropdown to close i again.

I've made a pen of the current markup/functionality: http://codepen.io/anon/pen/EBwlA

This is my first angular project so if anything is not done "the correct way" please feel free to tell me :)

Thanks

Dayan Moreno Leon · Accepted Answer · 2014-06-06 17:19:13Z

1

you can just attach an ng-click event to every li or a tag like this

 ng-click="toggleOpen($event)"

if there is a more specific method you want to investigate let me know

this is a method using a service that will allow you to have collapsable elements working together

app.service('collapsables',['$rootScope',function($rootScope){ return{ notify:function(event,payload){ $rootScope.$broadcast(event,payload); } } }]);

app.directive('collapsable',['collapsables',function(collapsables){
    return{
        restrict:'A'
        controller:function($scope){
            $scope.Toggle=function(){
                 $scope.expanded=!$scope.expanded;
                 collapsables.notify('toggled',{scid:$scope.$id,group:group});
             }
             $scope.$on('toggled',function($event,details){
                     var canClose=(!$scope.group || $scope.group==details.group || !details.group) && $scope.$id!=details.scid && $scope.expanded 
                     $scope.expanded=canClose.
              })
         }
}



}])

now this this you can attach the collapsable directive to any element and it should allow you to comunicate the intents among all collapsables, you shuld be also be able to group them in case you want to isolate behaviors, notice that this directive doesn't cfreta a scope merely extends the xisting one to add a behavior, which is bad if you have several of this in the same controller, in that case a variant of this needs to be implemented using isolated scopes, but the idea remains the same

edited Jun 6, 2014 at 17:19

answered Jun 6, 2014 at 15:50

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

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

4 Comments

Michael Falck Wedelgård Over a year ago

But what if I click somewhere on the background? I can't attach a ng-click="toggleOpen($event)" on the <body> for instance, since the toggleOpen function is out of scope?

Dayan Moreno Leon Over a year ago

so you want to close it when you click anywhere. in this case you need to install an onlick handler on your documents body that will signal all your components to close using $broadcast events and $on events in your cotnrollers

Michael Falck Wedelgård Over a year ago

That sounds right, do you have an example of how to implement it? I read the angular docs, but wasn't really able to figure out how it all works (sorry, still new in this :) )

Michael Falck Wedelgård Over a year ago

Seems like this video explains it :) youtube.com/watch?v=1OALSkJGsRw

Collectives™ on Stack Overflow

Angular custom dropdown

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related