Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I am trying to make custom directive in angularjs .I am able to make custom directive of menu option actually the menu option is this https://jqueryui.com/menu/ .But I need the menu option will display only 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() {
        // Code here
    }
});

how to bind click or mouse over event with custom directive ?

share|improve this question
    
Click event in directive element.bind('click', function(){ //code here }); – vamsikrishnamannem May 15 '15 at 6:39

Use ngClick and ngMouseOver directives respectively

e.g.

<div ng-controller="cnt">
    <button ng-click="showMenu()">Click for menu</button>
    <button ng-mouseover="showMenu()">Hover for menu</button>
</div>

edit:

need to call menu() on the element. Should be able to pass element through like below, though this might need editing as I haven't tested the code.

$scope.showMenu = function(element) {
    element.menu();
}

<div ng-controller="cnt">
    <button ng-click="showMenu($element)">Click for menu</button>
    <button ng-mouseover="showMenu($element)">Hover for menu</button>
</div>
share|improve this answer
    
but how to show menu on button click\ – Pallavi Sharma May 15 '15 at 7:03
    
Actually I need to show menu on button click ..currently it is display on load – Pallavi Sharma May 15 '15 at 7:08
    
Should be able to pass $element in like showMenu($element)? I'll update the answer, but it might need adjusting as i haven't had a chance to test it. – Sharn White May 15 '15 at 7:09
    
@sham first try to understand my problem .Currently my menu option is display when i run the application.I need it only show when user click on button – Pallavi Sharma May 15 '15 at 7:11
    
could tou please use code pen – Pallavi Sharma May 15 '15 at 7:12

You could bind the controller to the directive to use its api

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

        },
        controller: 'cnt',
        link:function(scope,element,attr,ctrl){

            $(element).menu();
            $(element).find('li').click(function(){
              scope.showMenu()

            })
        }
    }
})
app.controller('cnt',function($scope){
 $scope.showMenu=function(){
   alert('im here');
 }
})
share|improve this answer
  var app=angular.module("ionicApp",['']);
  app.directive('custommenu',function(){    
    return{
        restrict:'A',
        scope:{

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

           element.bind('click', function() {

                       // Write your code here
           });
       }
    }
});

app.controller('cnt', function($scope) {

       $scope.isMenuVisible=false;
       $scope.showMenu = function() {

             $scope.isMenuVisible=true;
       }
  });

Avoid using jquery to bind events within angular js

// Update to show menu on click event of some button

<div ng-controller="cnt">
<button ng-click="showMenu()">Show menu</button> 

Now use the scope variable : isMenuVisible to cotrol visibility of menu as:

<div class="menu" data-ng-if="isMenuVisible">    
</div>

I added a JsFiddle version of the answer at here

share|improve this answer
    
I need to show menu on button click – Pallavi Sharma May 15 '15 at 7:06
    
Actually I need to show menu on button click ..which is now display on load – Pallavi Sharma May 15 '15 at 7:08
    
Do you load the html for menu initially? – akhil_jose May 15 '15 at 7:09
    
first try to understand my problem .Currently my menu option is display when i run the application.I need it only show when user click on button – Pallavi Sharma May 15 '15 at 7:11
    
please use code pen or fiddle – Pallavi Sharma May 15 '15 at 7:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.