如何在導航欄外點擊隱藏子菜單

我想編寫一個指令來導航導航欄。 https://jsfiddle.net/berber5/p03uhub8/如何在導航欄外點擊隱藏子菜單

的index.html：

<html lang="fr" ng-app="activity" id="ng-app">  
    <div ng-controller="mainCtrl"> 
     <navigation-bar datas ="data"> </navigation-bar> 
    </div> 
</html>

我的指令：

app.directive('navigationBar', ['$window', function ($window) { 

     return { 
      restrict: 'EA', 
      template: "<div id='navigation' class='navigation'>"+ 
       "<ul id='navidationUl' name='navigationName'> "+ 
        "<li id='navLi' ng-repeat='(key, value) in datas'>"+ 
         "<a ng-href='{{value.route}}' ng-click='toggle($index)'> {{value.libelle}} "+ 
          "<span ng-if='value.subMenu.length > 0' class='caret'></span>"+ 
         "</a> "+ 
         "<ul id ='subMenu' ng-show ='value.showMe && value.subMenu.length > 0'>"+ 
          "<li ng-repeat='(key2, value2) in value.subMenu'>"+ 
           "<a ng-href='{{value2.route}}' ng-click ='dismissAll()'>{{value2.libelle}}</a>"+ 
          "</li>"+ 
         "</ul>"+ 

        "</li> "+ 
       "</ul>"+ 
      "</div>", 
      scope: { 
       datas : "=datas" 
      }, 
      link: function (scope, elem, attrs) { 
       console.log("LINK : ", scope, elem, attrs); 
       scope.dismissAll = function(){ 
        for(var i = 0; i< scope.datas.length; i++) { 
         scope.datas[i].showMe = false; 
        } 
       } 
       scope.toggle = function toggle(index){ 
        scope.datas[index].showMe = !scope.datas[index].showMe; 
        for(var i = 0; i< scope.datas.length; i++) { 
         if (i !=index) { 
          scope.datas[i].showMe = false; 
         } 
        } 
       }; 
      } 
     }; 
}]);

我尋求如何隱藏子菜單，如果用戶點擊導航欄

來源

2015-04-02 Karim Oukara

你的外需要添加全局事件點擊隱藏所有菜單，如下所示：

app.directive('navigationBar', ['$window', '$document', function ($window, $document) { 

    return { 
     restrict: 'EA', 
     template: "<div id='navigation' class='navigation'>"+ 
      "<ul id='navidationUl' name='navigationName'> "+ 
       "<li id='navLi' ng-repeat='(key, value) in datas'>"+ 
        "<a ng-href='{{value.route}}' ng-click='toggle($index)'> {{value.libelle}} "+ 
         "<span ng-if='value.subMenu.length > 0' class='caret'></span>"+ 
        "</a> "+ 
        "<ul id ='subMenu' ng-show ='value.showMe && value.subMenu.length > 0'>"+ 
         "<li ng-repeat='(key2, value2) in value.subMenu'>"+ 
          "<a ng-href='{{value2.route}}' ng-click ='dismissAll()'>{{value2.libelle}}</a>"+ 
         "</li>"+ 
        "</ul>"+ 

       "</li> "+ 
      "</ul>"+ 
     "</div>", 
     scope: { 
      datas : "=datas" 
     }, 
     link: function (scope, elem, attrs) { 
      scope.dismissAll = function(){ 
       for(var i = 0; i< scope.datas.length; i++) { 
        scope.datas[i].showMe = false; 
       } 
      } 
      scope.toggle = function toggle(index){ 
       scope.datas[index].showMe = !scope.datas[index].showMe; 
       for(var i = 0; i< scope.datas.length; i++) { 
        if (i !=index) { 
         scope.datas[i].showMe = false; 
        } 
       } 
      }; 

      elem.bind('click', function(e) { 
       // this part keeps it from firing the click on the document. 
       e.stopPropagation(); 
      }); 
      $document.bind('click', function() { 
       scope.$apply(scope.dismissAll); 
      }) 
     } 
    }; 
}]);

點擊此處瞭解詳情：Angular Click outside of an element event

來源

2015-04-03 08:11:42 Dralagen

是IT WORKS !!!!謝謝 – 2015-04-03 08:21:52

如何在導航欄外點擊隱藏子菜單

回答

相關問題