Как связать событие click в угловом js?

Question

Я пытаюсь сделать нестандартную директиву в angularjs .Я состоянии сделать нестандартную директиву опции меню фактически пункт меню это https://jqueryui.com/menu/ .Но мне нужна опция меню будет отображаться только тогда, когда пользователь нажмите или курсора, находящегося событие на кнопке.

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

как связать кнопку мыши или через события с пользовательской директивы?

Answer 1

Использование ngClick и ngMouseOver директивы соответственно

• ngMouseover
• ngClick

например,

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

редактировать:

необходимо вызвать меню() на элементе. Должен иметь возможность передавать элемент, как показано ниже, хотя это может потребоваться для редактирования, поскольку я не тестировал код.

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

Answer 2

Вы можете связать контроллер с директивой, чтобы использовать его апи

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

Answer 3

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

Избегайте использование JQuery, чтобы связать события в угловом JS

// Обновление для отображения меню на клике событие некоторых кнопок

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

Теперь использовать переменную области видимости: isMenuVisible для Cotrol видимость меню как:

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

Я добавил версию JsFiddle ответа на here