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() {
        // Code here
    }
});

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

Answer 1

分别使用ngClick和ngMouseOver指令

e.g。

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

编辑：

需要调用元素上的menu（）。应该可以像下面那样传递元素，虽然这可能需要编辑，因为我还没有测试过代码。

$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

您可以将控制器绑定到指令以使用其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');
 }
})

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来将菜单的可见性视为：

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

我在here

添加了答案的JsFiddle版本

如何在角度js中绑定click事件？

3 个答案: