AngularJS : how to show menu option on button click -
i trying make custom directive in angularjs .i able make menu option menu option https://jqueryui.com/menu/ .but need menu option display when user click or mouseover event on button.
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(){ } })
how bind click or mouse on event custom directive ?
you can use ng-show show menu when user hovers on or clicks button.
though, seems silly add hover directive. here's 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 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>
Comments
Post a Comment