Question

我刚开始学习angularJS，我希望用bootstrap和angular构建一些下拉列表和标签。我知道那里有一个完整的角度引导库，但我不想使用它，因为我想知道幕后发生了什么。所以我尝试构建所需的下拉功能，但还没有能够这样做。问题是：

我必须点击下拉列表才能打开它又消失了。我希望能够点击/触摸除了下拉再次关闭我。

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

这是我的第一个有角度的项目，所以如果没有做任何事情＆＃34;正确的方式＆＃34;请随时告诉我：）

由于

Answer 1

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

 ng-click="toggleOpen($event)"

如果您想要调查更具体的方法，请告诉我

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

app.service（ 'collapsables'，[ '$ rootScope'，函数（$ rootScope）{ 返回{ 通知：功能（事件，有效载荷）{ $ rootScope $广播（事件，有效载荷）。 } } }]）;

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



}])

现在这个你可以将collapsable指令附加到任何元素，并且它应该允许你在所有可折叠程序之间进行通信，你也可以将它们分组以防你想要隔离行为，注意这个指令没有'cfreta一个范围只是扩展了xisting一个来添加一个行为，如果你在同一个控制器中有几个这样做是不好的，在这种情况下，这个的变体需要使用隔离的范围来实现，但这个想法保持不变

角度自定义下拉列表

1 个答案: