gpt4 book ai didi

angularjs - AngularJS指令上的ng-click属性

转载 作者:行者123 更新时间:2023-12-03 12:10:01 25 4
gpt4 key购买 nike

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

例如,如果我的指令名称是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上定义 Controller

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

最佳答案

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

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>

Angular :
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 - AngularJS指令上的ng-click属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15613992/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com