使用angularjs添加包含事件的新标记
16lz
2021-01-22
I need to add a new html tag with an event in it, for example:
我需要在其中添加一个带有事件的新html标记,例如:
<html ng-app="module">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-controller="clickTest">
<div>
<input type="button" value="button1" ng-click="click($event)">
</div>
</body>
<script>
var module = angular.module("module", []);
module.controller("clickTest", function($scope, $http){
$scope.click = function($event) {
$($event.currentTarget.parentNode).append('<input type="button" value="button2" ng-click="click($event)">');
}
});
</script>
</html>
How do I add an event in angularjs?
如何在angularjs中添加事件?
1 个解决方案
#1
0
Try this one
试试这个
<section ng-app="myApp" ng-controller="MainCtrl">
<addbuttonsbutton></addbuttonsbutton>
<div id="space-for-buttons"></section>
</section>
var myApp = angular.module('myApp', []);
function MainCtrl($scope) {
$scope.count = 0;
}
//Directive that returns an element which adds buttons on click which show an alert on click
myApp.directive("addbuttonsbutton", function(){
return {
restrict: "E",
template: "<button addbuttons>Click to add buttons</button>"
}
});
//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function($compile){
return function(scope, element, attrs){
element.bind("click", function(){
scope.count++;
angular.element(document.getElementById('space-for-buttons')).append($compile("<div><button class='btn btn-default' data-alert="+scope.count+">Show alert #"+scope.count+"</button></div>")(scope));
});
};
});
//Directive for showing an alert on click
myApp.directive("alert", function(){
return function(scope, element, attrs){
element.bind("click", function(){
console.log(attrs);
alert("This is alert #"+attrs.alert);
});
};
});
更多相关文章
- jqGrid 数据加载完事件 loadComplete 使用
- JavaScript - 检测click事件是否触发了DOMNodeInserted事件
- 如何将占位符放在struts textfield标记中?
- 正则表达式匹配所有字符到某个标记
- Jquery中动态添加元素的绑定事件不起作用
- 我可以使用onBlur事件对TextBox进行日期检查吗?
- jQuery:添加事件监听器是否覆盖相同事件的前一个监听器?
- Web小练习-JavaScript事件的简单练习,监听鼠标的移动
- 掌握JavaScript中的事件监听