Adding ng-click event using jQuery

Question

Being new to Angularjs, I need a little help with this problem. I am trying to add ng-click = "getGallery (57)" to the mod tab. Adding through jQuery is not a problem, however, I understand that when I do this, Angular does not compile the newly added ng-click. I have a simple controller

function imageGalleryCtrl ($scope, $http) { //get gallery info on click $scope.getGallery = function(id) { $http.post('/beta/images/get_images',{'id': id}).success(function(data) { $scope.images = data.thisGal_images; $scope.images.galID = id; }); }; } 

I am adding ng-click to an element using jQuery

 //Edit image tab to use angularjs $('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')'); 

How to get Angular to compile this newly added ng-click?

Thanks!

HTML mod:

This is a modal that is called when you click on the gallery name.

 <div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"></button> <h3>Create New Gallery</h3> </div> <div class="modal-body"> <ul id="myTab" class="nav nav-tabs"> <li id="image_home" class=""> <a href="#home" data-toggle="tab">Home</a> </li> <li id="image_upload" class=""> <a href="#upload" data-toggle="tab">Upload Image Gallery</a> </li> <li id="image_edit" class=""> <a href="#edit" data-toggle="tab">Edit Image Gallery</a> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in" id="home"> <?php include('create.php'); ?> </div> <div class="tab-pane fade" id="upload"> <?php include('upload.php'); ?> </div> <div class="tab-pane fade" id="edit"> <div class="span9"> <ul id="imageSort" class="gallery-container"> <li ng-repeat="image in images"> <img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt=""> {{image.orgName}} </li> </ul> </div><!-- /span9 --> </div><!-- /row --> </div> </div> </div><!-- /modal-body --> <div class="modal-footer"> <a href="javascript:;" class="btn" data-dismiss="modal">Close</a> <a href="javascript:;" id="next" class="btn btn-primary">Next</a> </div> </div> 

Update

So what I'm really trying to do is Angular, and after some research I am here. The controller is the same as above, and I updated the tabs in modal form as follows.

 <div class="modal-body"> <ul id="myTab" class="nav nav-tabs"> <li id="image_home" class=""> <a href="#home" data-toggle="tab">Home</a> </li> <li id="image_upload" class=""> <a href="#upload" data-toggle="tab">Upload Image Gallery</a> </li> <li id="image_edit" class=""> <a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a> </li> </ul> 

If I hard-code ng-click, as described above, the tab will refresh as expected. What I try to do when the modagen is called, (#image_edit a) gets a specific ng-click = "getGallery (id). I need to tell Angular to look again at the ng-click for id.

Answer 1

Basically, what I get is you want this to happen:

 <ul id="imageSort" class="gallery-container"> <li ng-repeat="image in images"> <img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="" ng-click="getGallery(image.galleryID)" > {{image.orgName}} </li> </ul> 

The problem is that I'm not sure about the connection between settings.id and galleryID for a specific image. If you can customize this relationship in the data so that it just automatically binds, you are in better shape.

Answer 2

Although I also think that you should try to find a different approach, the answer to your question

How to get Angular to compile this newly added ng-click?

is an

 // remove and reinsert the element to force angular // to forget about the current element $('#button1').replaceWith($('#button1')); // change ng-click $('#button1').attr('ng-click','exec2()'); // compile the element $compile($('#button1'))($scope); 

See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview