当前位置: 首页 > 面试题库 >

AngularJS指令上的ng-click属性

壤驷英叡
2023-03-14
问题内容

我认为开箱即用的指令上使用众所周知的角度属性应该很容易。

例如,如果我的指令名称是myDirective,我想以这种方式使用它:

<div ng-controller="myController">
   <my-directive ng-click="doSomething()"><my-directive>
</div>

无需像下面的示例一样定义自定义点击属性(onClick)

<div ng-controller="myController">
   <my-directive on-click="doSomething()"><my-directive>
</div>

似乎ng-click可以工作,但是您也需要在指令标签上也指定ng-controller,这也是我所不希望的。我想在周围的div上定义控制器

是否可以在指令上使用ng-click以及在父html元素上定义的控制器?


问题答案:

这是更新的代码。也许这就是您想要的。

HTML:

<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
        <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
    </div>
</div>

角度:

var app = angular.module('myApp', []);

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            eventHandler: '&ngClick'
        },
        template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
    };
});

app.controller('MyController', ['$scope', function($scope) {
    $scope.myFirstFunction = function(msg) {
         alert(msg + '!!! first function call!');   
    };
    $scope.mySecondFunction = function(msg) {
         alert(msg + '!!! second function call!');   
    };
}]);

编辑

检查我在jsFiddler中提出的解决方案是您要寻找的是什么?

http://jsfiddle.net/migontech/3QRDt/1/



 类似资料:
  • 问题内容: 我一直在研究修改AngularJS ng-click指令以添加一些其他功能。对于如何使用它,我有一些不同的想法,但是一个简单的想法是将Google Analytics(分析)跟踪添加到所有ng-clicks,另一个是防止双击。 为此,我的第一个想法是使用装饰器。所以像这样: 但这不会起作用,因为装饰器会在实例化时触发,而不是在满足指令中的表达式时触发。因此,在这种情况下,它将在加载带有

  • 本文向大家介绍AngularJS基础 ng-click 指令示例代码,包括了AngularJS基础 ng-click 指令示例代码的使用技巧和注意事项,需要的朋友参考一下 AngularJS ng-click 指令 AngularJS 实例 按钮每次点击时,计数变量 count 自动加 1: 注意:实例中,按钮每被点击一次变量 "count"  定义和用法 ng-click 指令告诉了 Angul

  • 本文向大家介绍AngularJS ng-mousedown 指令,包括了AngularJS ng-mousedown 指令的使用技巧和注意事项,需要的朋友参考一下 AngularJS ng-mousedown 指令 AngularJS 实例 在鼠标按下时执行表达式: 定义和用法 ng-mousedown 指令用于告诉 AngularJS 鼠标在指定的 HTML 元素上按下时要执行的操作。 ng-m

  • 问题内容: 我无法在现有答案中找到解决方案,因此我将其发布。 我有一个包含许多输入字段的表单,其中很多都是必需的。 表单中有按钮(超过2个),并使用ng-click绑定到控制器中的功能。 在执行功能之前,我需要先在ng-click上验证表单。 默认情况下,表单验证是在函数执行后进行的。如果未填写必填字段,则功能不应运行。 我制造了一个小提琴。https://jsfiddle.net/z1uyyqg

  • 问题内容: 我正在构建AngularJS指令。我希望该指令包装其中包含ng-click的其他内容。单击后,结果按钮不执行任何操作。这是我尝试过的代码的简化版本: (HTML) (JavaScript) 如何更改它,以便该按钮实际触发$ scope.refresh()函数? 额外说明: 我需要该指令的本地对象信息(单个控制器中可以有多个该指令),因此我创建了一个新作用域。 问题答案: 就像dcode

  • 问题内容: 任何人都可以为该JSFiddle提供正确的方法: JsFiddle链接 我正在尝试通过.class&#ID更改元素的类。 提前致谢 感谢tymeJV,新的JSFiddle: 解 问题答案: 正确的方法是根据切换变量使用,请考虑: CSS: JS: HTML: 通过根据变量(“ toggle”)是否为或分配引用的类(在上面为“红色”)来工作。