Incorporate a fresh label for a function utilizing AngularJS

Question

Incorporate a fresh label for a function utilizing AngularJS

I want to insert a new HTML tag with an event attached to it. Here is an example of what I am trying to achieve:

<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>

Can anyone provide guidance on how to add an event in AngularJS?

javascript angularjs

Answer 1

Answer №1

How about giving this a try?

<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;
}

//Creating a directive that adds buttons on click to show an alert
myApp.directive("addbuttonsbutton", function(){
return {
restrict: "E",
template: "<button addbuttons>Click to add buttons</button>"
}
});

//Another directive for adding buttons and showing 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 to display alert on button click
myApp.directive("alert", function(){
return function(scope, element, attrs){
element.bind("click", function(){
console.log(attrs);
alert("This is alert #"+attrs.alert);
});
};
});

Answer 2

How about giving this a try?

<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;
}

//Creating a directive that adds buttons on click to show an alert
myApp.directive("addbuttonsbutton", function(){
return {
restrict: "E",
template: "<button addbuttons>Click to add buttons</button>"
}
});

//Another directive for adding buttons and showing 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 to display alert on button click
myApp.directive("alert", function(){
return function(scope, element, attrs){
element.bind("click", function(){
console.log(attrs);
alert("This is alert #"+attrs.alert);
});
};
});

Incorporate a fresh label for a function utilizing AngularJS

Answer №1

Similar questions

"Confusion arises when handling undefined arguments within async.apply in the context of async

Styling a textbox within a gridview using JavaScript

Increasing the token size in the Metaplex Auction House CLI for selling items

Currently in the process of executing 'yarn build' to complete the integration of the salesforce plugin, encountering a few error messages along the way

Utilizing jQuery's .ready() method within the body section of a document to modify the onload event following the printing of the body

How to implement various middlewares in Express.js depending on the current environment using NODE_ENV?

The function getSelection().focusNode does not function properly within a specified ID

Quantities with decimal points and units can be either negative or positive

What is the best way to integrate an admin template into a website without relying on popular CMS platforms like WordPress?

Making an HTTP request using AngularJS takes significantly more time than directly accessing the endpoint through a web browser

Tips for preserving the jquery inputmask after updating the DOM

Add a checkbox element to a web API using ReactJS

Searching for paired values within an array using Javascript or Jquery

.click function failing to trigger on dynamically loaded form

The hyperlink function is not operational in Gmail attachments

Combining Various Time Periods in JavaScript

Updating AngularJS scope values within a PromiseIn an AngularJS application

Accessing the chosen value of an ng-model

What is the best way to dynamically insert an object into a field name in react-final-form?

Safari's anchor links tend to leap higher than necessary