use*_*920 12 angularjs angularjs-directive
嗨,我正在研究angularjs的自定义指令.我只是想知道如何在单击按钮时调用该指令.请建议我如何实现这一目标.
谢谢
sam*_*ues 14
<div ng-controller="ctrl">
<mydirc></mydirc>
<button ng-click="clickMe()">call clickMe()</button>
</div>
app.directive('mydirc', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function($scope, element, attrs) {
$scope.clickMe= function() {
alert('inside click');
}
}
}
});
Vid*_*ddy 10
以下示例显示了可以处理单击事件的示例自定义指令; 这是一个与范围无关的指令.并且必须先定义appRoot模块.
<div ng-controller="MyController">
<button custom-click="">Click Me</button>
</div>
appRoot.directive('customClick', function() {
return {
link: function(scope, element, attrs) {
element.click(function(){
//Do something useful
});
}
}
});
通过"调用"指令,我将假设您指的是从指令处理onclick事件.
您可以利用指令的'link'属性来附加范围初始化和函数,如下所示:
HTML
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div clicker></div>
</body>
</html>
JS
var app = angular.module('app', []);
app.directive('clicker', function(){
var link = function(scope){
scope.showMessage = function(){
alert('you clicked the directive!');
};
};
return{
link: link,
template: "<button ng-click='showMessage()'>Click me!</button>"
};
});
| 归档时间： |
|
| 查看次数： |
44561 次 |
| 最近记录： |