Button from a dynamically added html tag does not invoke ng-click in angular

Question

I am trying to make my button from an appended html work using the ng-click event. I have seen some solutions here but it seems not to work for me. Probably because I have a different situation or I just couldn't use it right. My codes are below:

fileMaintenanceCtrl.js

/// <reference path="../angular.js" /> angular.module('adminApp') .controller('fileMaintenance', [ '$scope', '$http', '$sce', function ($scope, $http, $sce, $compile) { // Adding Client $scope.addNewClient = function () { debugger; alert($scope.addClient.CompanyName); } // End of adding client // This is how I get the html template $scope.addClient = function () { $http.get('/FileMaintenance/AddClient') .then(function(response) { var divTemplate = response.data; var element = angular.element(document.getElementById('btnAddCompany')); console.log(element.toString()); element.append(divTemplate); $compile(element)($scope); }, function(error) { alert('An error occured in retrieving view. ' + error.message); }); }; } ]);

addClient.cshtml

<h1 class="text-center text-info">Add Client</h1> <br /> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form role="form" name="formAddClient"> <div class="form-group"> <label for="inputCompany">Company</label> <input id="inputCompany" type="text" class="form-control" ng-model="addClient.CompanyName" name="CompanyName"/> </div> <div class="form-group"> <label for="inputContactPerson">Contact Person</label> <input id="inputContactPerson" type="text" class="form-control" ng-model="addClient.contact_person" name="ContactPerson"/> </div> <div class="form-group"> <label for="inputEmailAddress">Email Address</label> <input id="inputEmailAddress" type="text" class="form-control" ng-model="addClient.email_address" name="EmailAddress"/> </div> </form> <input type="button" id="btnAddCompany" class="btn btn-success" value="Add Company" ng-click="addNewClient()"/> </div> </div>

fileMaintenance.cshtml <-- this is where I place the html template

<div class="active tab-pane" id="file_maintenance"> <div> <a href="javascript:void(0);" ng-click="addClient()">Add Client</a> </div> <br /> <div id="file_maintenance_view_area"> <div ng-bind-html="chosen_view"> </div> </div> </div> <!-- End of tab file_maintenance -->

I also tried this code:

$scope.addClient = function () { $http.get('/FileMaintenance/AddClient') .then(function(response) { var divTemplate = response.data; var temp = $compile(divTemplate)($scope); var ele = angular.element(document.getElementById('btnAddCompany')).append(temp); }, function(error) { alert('An error occured in retrieving view. ' + error.message); }); };

but if I do it like this code, I can't even get my template html to show.

I don't have an exact answer for you, but it is a big no-no for the controller to modify the DOM directly. You may need a custom directive here. — Tim Biegeleisen
– Tim Biegeleisen, Commented Dec 17, 2017 at 6:53
Yes. I actually saw this 'directive' the problem is, I am new to angular and I do not want to complicate it. I can't get to run the program currently. — stack questions
– stack questions, Commented Dec 17, 2017 at 6:56
Why don't you just use ng-if to dynamically include/exclude your HTML content, and then bind it to your controller? I agree that directives can be a bit ugly, and may not be your first choice. — Tim Biegeleisen
– Tim Biegeleisen, Commented Dec 17, 2017 at 6:58
I just get the html template according to the button I click. If I have 2 buttons, I just change the view accordingly. — stack questions
– stack questions, Commented Dec 17, 2017 at 7:00
@stackquestions You need to change the way you think about how applications work. Don't download HTML. Download data, as JSON. The HTML should be, statically, in your template. And it should display the data you download. If you need to choose what to display depending on what you download, then simply use ng-if or ng-switch to choose what to display depending on what the data contains. — JB Nizet
– JB Nizet, Commented Dec 17, 2017 at 9:21

davidkonrad · Accepted Answer · 2017-12-17 09:37:03Z

1

You should $compile after the snippet is injected :

.then(function(response) { var divTemplate = response.data; var element = angular.element(document.getElementById('btnAddCompany')); element.append(divTemplate); $compile(element)($scope); },

append() only append a string which when is parsed and inserted to the DOM. It does not consider links you have made to the $scope.

answered Dec 17, 2017 at 9:37

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

stack questions Over a year ago

I have updated my code to reflect what you suggested. How do I place the compiled element to the main view? The way i did it before was to place the html codes in a variable and bind the variable to the main view.

stack questions Over a year ago

That variable is $scope.chosen_view

davidkonrad Over a year ago

@stackquestions, I do not follow what you mean with "main view"?? here is a plunkr demonstrating the above, simplified -> plnkr.co/edit/nAtJV6hSz512uKorAxkD?p=preview

stack questions Over a year ago

Sorry. What I mean is the partial view is not rendered in the main view. The way I get the view or html tags to append to my main view before is using the ng-bind-html="chosen_view". This way I get the input fields and the button, but the button does not work. Applying your solution, I do not get the partial view anymore. Probably it is not being bound to the ng-bind-html="chosen_view"

stack questions Over a year ago

Thank you! Thank you! Thank you! I've seen it now when I used your plnkr. THANK YOU!!!!!!!!

|

Collectives™ on Stack Overflow

Button from a dynamically added html tag does not invoke ng-click in angular

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related