Question

我正在尝试在angularjs中制作自定义指令。我能够制作菜单选项实际上菜单选项是https://jqueryui.com/menu/ 。但我需要菜单选项才会在用户点击或鼠标悬停事件时显示。

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

     }
    })

如何使用自定义指令绑定事件上的click或mouse？

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

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

1 个答案: