how to bind click event in angular js?

Question

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 ?

Click event in directive element.bind('click', function(){ //code here }); — vamsikrishnamannem
– vamsikrishnamannem, Commented May 15, 2015 at 6:39

Sharn White · Accepted Answer · 2015-05-15 07:11:19Z

3

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>

edited May 15, 2015 at 7:11

answered May 15, 2015 at 6:43

Sharn White

6243 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pallavi Sharma Over a year ago

Actually I need to show menu on button click ..currently it is display on load

Sharn White Over a year ago

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.

Pallavi Sharma Over a year ago

@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

Mwayi · Accepted Answer · 2015-05-15 06:52:19Z

0

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');
 }
})

answered May 15, 2015 at 6:52

Mwayi

1,62315 silver badges13 bronze badges

Comments

akhil_jose · Accepted Answer · 2015-05-15 09:03:35Z

0

  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

edited May 15, 2015 at 9:03

answered May 15, 2015 at 7:04

akhil_jose

194 bronze badges

3 Comments

Pallavi Sharma Over a year ago

Actually I need to show menu on button click ..which is now display on load

akhil_jose Over a year ago

Do you load the html for menu initially?

Pallavi Sharma Over a year ago

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

Collectives™ on Stack Overflow

how to bind click event in angular js?

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related