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

【问题标题】：AngularJS : how to show menu option on button clickAngularJS：如何在按钮单击时显示菜单选项
【发布时间】：2015-07-26 22:38:32
【问题描述】：

我正在尝试在 angularjs 中制作自定义指令。我可以制作菜单选项实际上菜单选项是这个https://jqueryui.com/menu/ .但我需要菜单选项仅在用户 click 或 mouseover 按钮上的事件时显示。

http://codepen.io/anon/pen/OVNqMg

    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(){

     }
    })

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

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

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

不过，添加悬停指令似乎很愚蠢。这是CodePen sample。

JS：

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：

<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>

【讨论】：