0

In my angular web app, I'll let users enter dates, and then using ajax I'll generate the tours that are available. To do this I want to generate code through ajax that contains ng-click calls. I'm trying to compile it to later add it to the div #tourAvailPlan. I am adding $compile to the controller (app.controller("myCtrl", function($scope, $http, $filter, $compile, ngDialog) {...). Still, when I click buttons with ng-click (generated with ajax), nothing happens.

This answer creates a jQuery object from the html string, but I don't really know why. I did it here as well anyway.

What am I doing wrong?

Angular

$http({
method: 'post',
url: '/ajax/tours/loadGroupTours.php', //Load tours in given date range
data: {
dateArr: dateArr,
dateDep: dateDep,
tourId: tourId
}
}).then(function successCallback(response) {
    //No errors

    $el = $(response.data);
    $compile($el)($scope);

    document.getElementById('tourAvailPlan').innerHTML = response.data;

}, function errorCallback(response) {
    //Errors
    alert('ERROR in http request!');
});
        }
    }
};
Community
  • 1
  • 1
Marcus Edensky
  • 924
  • 3
  • 13
  • 33

1 Answers1

1

You have to append the compiled element. Replace

document.getElementById('tourAvailPlan').innerHTML = response.data;

with

$('#tourAvailPlan').append($el)
Emanuele Spatola
  • 555
  • 3
  • 10