javascript - Add a new tag with an event using angularjs -
i need add new html tag event in it, example:
<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 add event in angularjs?
try 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 returns element adds buttons on click show alert on click myapp.directive("addbuttonsbutton", function(){ return { restrict: "e", template: "<button addbuttons>click add buttons</button>" } }); //directive adding buttons on click show 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 showing alert on click myapp.directive("alert", function(){ return function(scope, element, attrs){ element.bind("click", function(){ console.log(attrs); alert("this alert #"+attrs.alert); }); }; });
Comments
Post a Comment