AngularJS ng-click not responding when clicked

Question

I know there is alot of questions about this topic out there, but could not find any solution to my problem. My code:

UPDATE

   $scope.openOne = function (id) {

    ImageService.getDetails(id).then(function (data) {

        $scope.imageDetail = data;

    }).catch(function (e) {

        var message = [];

    });
}

function getAllImages() {
    ImageService.getImages().then(function (value) {

        $scope.images = value;

        var items = [];

        $(value).each(function () {
            var url = "https://someUrl/" + this.Image[0];
            console.log(url);
            items.push(`
                        <tr>
                            <td><button id="button" ng-click="openOne(${this._id})">${this.ImageName}</button></td>
                            <td>${this.ImageCategory}</td>
                            <td>
                            <img style="width:30%;" ng-src="${url}" alt="The Image is missing">
                            </td>
                        </tr>
                        `);
        });
        $("#body").append(items.join(''));

    }).catch(function (e) {

        var message = [];


    }).finally(function (e) {

    });
}

I am creating the button in in the controller and then appending it to the DOM. Does anybody see the error? When I click the button nothing happens.

You can't just append html that includes angular markup - you need to use angular's `$compile` service (https://docs.angularjs.org/api/ng/service/$compile). Also see http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx for an example of it's use. — james00794, Nov 04 '17 at 21:06
Using jQuery like this totally goes against angular methodology. Strongly suggest reading [“Thinking in AngularJS” if I have a jQuery background](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Nov 04 '17 at 22:12

score 2 · Answer 1 · answered Nov 04 '17 at 22:23

2

Approach is all wrong.

The fundamental principal in angular is let your data model drive the view and let angular compile that view from templates

A more typical set up would pass your images array to ng-repeat in the view:

Controller:

function getAllImages() {
    ImageService.getImages().then(function (value) {
        $scope.images = value;
   });
}

View:

<tr ng-repeat="img in images track by $index">
  <td><button id="button" ng-click="openOne(img.id)">{{img.ImageName}}</button></td>
  <td>{{img.ImageCategory}}</td>
  <td>
    <img style="width:30%;" ng-src="{{img.url}}" alt="The Image is missing">
  </td>
</tr>

answered Nov 04 '17 at 22:23

charlietfl

170,828
13
121
150

I went with this approche. Had it as backup. But the problem with this way is that when I initiate DataTables it doesnt find the content, because the data comes in afterwards, even if I place it in the finally block, – AllramEst Nov 04 '17 at 22:25
Use angular-ui-datatables module. It wraps the plugin and uses angular methodology for handling the data model – charlietfl Nov 04 '17 at 22:25

score 0 · Answer 2 · answered Nov 04 '17 at 21:10

0

You need to add $compile service here, that will bind the angular directives like ng-click to your controller scope. For example

app.controller('yourController', function($scope,$compile) {
var button = '<button id="button" ng-click="openOne(${this._id})">${this.ImageName}</button>';
items.push(button);
$("#body").append(items.join(''));
var temp = $compile(button)($scope);
$scope.openOne = function(){
   alert('Yes Click working at dynamically added element');
 }

});

answered Nov 04 '17 at 21:10

Muhammad Usman

10,039
22
39

do I have to add $compile to the project seperatly, or does it come with angular? – AllramEst Nov 04 '17 at 21:22
it's an angular service. just use this as I used in answer. You don't need to do anything else. [$compile](https://docs.angularjs.org/api/ng/service/$compile#overview) – Muhammad Usman Nov 04 '17 at 21:34
it didnt work, the click is still unresponsive. added my entire code to the question. I didnt show I had a Jquery each in the code. Is the $compile code still the same? – AllramEst Nov 04 '17 at 21:40
Ok. I don't think if that's a full code. Please post your full code. – Muhammad Usman Nov 04 '17 at 21:46

AngularJS ng-click not responding when clicked

2 Answers2