javascript - Angular 自定义下拉菜单

Question

我刚刚开始学习 AngularJS，我希望使用 Bootstrap 和 Angular 构建一些下拉菜单和选项卡。我知道那里有一个完整的 Angular Bootstrap 库，但我不想使用它，因为我想知道幕后发生了什么。所以我正在尝试构建所需的下拉功能，但一直无法做到这一点。问题是:

1. 如果下拉列表打开，我必须先单击它，然后才能再次消失。我希望能够单击/触摸除下拉菜单再次关闭我。

我已经用当前的标记/功能制作了一支笔:http://codepen.io/anon/pen/EBwlA

这是我的第一个 Angular 项目，因此如果有任何事情没有“以正确的方式”完成，请随时告诉我:)

谢谢

Answer 1

您可以将 ng-click 事件附加到每个 li 或这样的标签

 ng-click="toggleOpen($event)"

如果您想研究更具体的方法，请告诉我

这是一种使用服务的方法，允许您让可折叠元素一起工作

app.service('collapsables',['$rootScope',function($rootScope){ 返回{ 通知:函数(事件，有效负载){ $rootScope.$broadcast(事件,有效负载); } } }]);

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.
              })
         }
}



}])

现在，您可以将可折叠指令附加到任何元素，它应该允许您在所有可折叠项之间传达意图，您还应该能够对它们进行分组，以防您想要隔离行为，请注意该指令不't cfreta 作用域只是扩展现有的作用域来添加一种行为，如果您在同一个 Controller 中有多个这样的行为，那么这很糟糕，在这种情况下，需要使用隔离作用域来实现该作用域的变体，但想法保持不变