Question

我在我的应用程序中使用Angular Bootstrap。我正在使用2个导航栏。它对我来说工作正常，也很敏感。我想要做的是将导航栏切换按钮设为下拉列表而不是停留在那里。

以下是我尝试http://plnkr.co/edit/CMxdQnSWCiDmOt9NWngJ?p=preview

的内容

我创建了一个指令

SELECT * 
FROM admin_marker 
WHERE admin_marker.city NOT IN (SELECT target COLLATE utf8_general_ci 
                                FROM messsage)

我在两个app.directive('navDropdown', function ($parse, $document) { return { restrict: 'A', link: function (scope, element, attr) { var fn = $parse(attr.navDropdown); $document.bind('click', clickOutsideHandler); element.bind('remove', function () { $document.unbind('click', clickOutsideHandler); }); function clickOutsideHandler(event) { var clickover = $(event.target); var _opened = $(".navbar-collapse").hasClass("navbar-collapse in"); if (_opened === true && !clickover.hasClass("navbar-toggle")) { // $("button.navbar-toggle").click(); $(".navbar .navbar-collapse").removeClass("in"); scope.navCollapsed = false; } } } }; });元素中使用了该指令。但它没有正常工作。

第一次，它可能正常工作。但如果您单击外部然后尝试打开菜单，则需要单击该按钮两次。有时这也不起作用。

我该如何解决？

当我们点击外面时，我需要关闭所有导航和下拉菜单。如果我们点击任何导航内部，请关闭除当前导航之外的所有导航。

感谢。

Answer 1

对于你的关闭点击问题，我有一个很好的指令：

  app.directive('offClick', ['$document', '$timeout', function ($document, $timeout) {

     function targetInFilter(target, filter) {
        if (!target || !filter) return false;
        var elms = angular.element(document.querySelectorAll(filter));
        var elmsLen = elms.length;
        for (var i = 0; i < elmsLen; ++i)
           if (elms[i].contains(target)) return true;
        return false;
     }

     return {
        restrict: 'A',
        scope: {
           offClick: '&',
           offClickIf: '&'
        },
        link: function (scope, elm, attr) {

           if (attr.offClickIf) {
              scope.$watch(scope.offClickIf, function (newVal, oldVal) {
                 if (newVal && !oldVal) {
                    $timeout(function () {
                       $document.on('click', handler);
                    });
                 } else if (!newVal) {
                    $document.off('click', handler);
                 }
              }
              );
           } else {
              $document.on('click', handler);
           }

           scope.$on('$destroy', function () {
              $document.off('click', handler);
           });

           function handler(event) {
              // This filters out artificial click events. Example: If you hit enter on a form to submit it, an
              // artificial click event gets triggered on the form's submit button.
              if (event.pageX == 0 && event.pageY == 0) return;

              var target = event.target || event.srcElement;
              if (!(elm[0].contains(target) || targetInFilter(target, attr.offClickFilter))) {
                 scope.$apply(scope.offClick());
              }
           }
        }
     };
  }]);

在你的html上你可以这样使用：

<div id="dvTravelers" ng-click="clickMenuTravelers()" off-click="clickMenuTravelers()" off-click-filter="#dvAddTravelersModal" off-click-if="menuVarOpen">

然后你可以在内部和外部点击事件的函数内设置你的逻辑

Angular Bootstrap在外部单击时关闭打开的导航栏（作为下拉列表）

1 个答案: