AngularJS：如何在单击按钮时显示菜单选项_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Ng Repeat

AngularJS：如何在单击按钮时显示菜单选项

angularjs

AngularJS：如何在单击按钮时显示菜单选项,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我正在尝试用angularjs制作自定义指令。我能够制作菜单选项实际上菜单选项是这样的 .但我需要菜单选项，它仅在用户单击或鼠标悬停事件打开按钮时显示如何将单击或鼠标悬停事件与自定义指令绑定？当用户悬停或单击按钮时，可以使用ng show显示菜单不过，添加hover指令似乎很愚蠢。这是我的建议 JS: HTML: 选项卡示例阿伯丁艾达亚当斯维尔阿迪斯顿德尔菲 Ada 萨尔兰萨尔茨堡-德朔嫩多瑙酒店萨尔兰萨尔茨堡德尔菲艾达萨尔兰萨尔茨堡德尔菲

我正在尝试用angularjs制作自定义指令。我能够制作菜单选项实际上菜单选项是这样的 .但我需要菜单选项，它仅在用户单击或鼠标悬停事件打开按钮时显示

如何将单击或鼠标悬停事件与自定义指令绑定？

当用户悬停或单击按钮时，可以使用ng show显示菜单

不过，添加hover指令似乎很愚蠢。这是我的建议

JS:

HTML:


选项卡示例

阿伯丁
艾达
亚当斯维尔
阿迪斯顿
德尔菲

Ada
萨尔兰
萨尔茨堡-德朔嫩多瑙酒店


萨尔兰
萨尔茨堡

德尔菲

艾达
萨尔兰
萨尔茨堡


德尔菲

艾达
萨尔兰
萨尔茨堡


栖木


Amesville

显示菜单

    var app=angular.module("ionicApp",['ionic']);
app.directive('custommenu',function(){    
        return{
            restrict:'A',
            scope:{

            },
            link:function(scope,element,attr){

                $(element).menu();
            }
        }
    })
    app.controller('cnt',function($scope){
     $scope.showMenu=function(){

     }
    })

var app = angular.module("ionicApp", ['ionic']);
app.directive('custommenu', function() {
  return {
    restrict: 'A',
    scope: {

    },
    link: function(scope, element, attr) {
      $(element).menu();
    }
  }
})
app.controller('cnt', function($scope) {
  $scope.canShowMenu = false;
  $scope.showMenu = function() {
    $scope.canShowMenu = true;
  }
})

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body ng-controller="cnt">

  <ul custommenu ng-show="canShowMenu">
    <li class="ui-state-disabled">Aberdeen</li>
    <li>Ada</li>
    <li>Adamsville</li>
    <li>Addyston</li>
    <li>Delphi
      <ul>
        <li class="ui-state-disabled">Ada</li>
        <li>Saarland</li>
        <li>Salzburg an der schönen Donau</li>
      </ul>
    </li>
    <li>Saarland</li>
    <li>Salzburg
      <ul>
        <li>Delphi
          <ul>
            <li>Ada</li>
            <li>Saarland</li>
            <li>Salzburg</li>
          </ul>
        </li>
        <li>Delphi
          <ul>
            <li>Ada</li>
            <li>Saarland</li>
            <li>Salzburg</li>
          </ul>
        </li>
        <li>Perch</li>
      </ul>
    </li>
    <li class="ui-state-disabled">Amesville</li>
  </ul>
  <button ng-mouseover="showMenu()" ng-click="showMenu()">show menu</button>
</body>


</html>