2

In the main.php loaded the angular.js library and Have a ajax call to another php file second.php when a button is clicked on the page and the results are added to the div. In second.php file have the below code

    echo  '<table ng-app="testapp">' ; 
   echo   '<tr>' ;
    echo '<td ng-model="testaa"> hello world </td>' ;
    echo  '<td> {{testaa}} </td>';
    echo  '</tr>'
    echo  '</table>' ;

In Main.php file have the below and angularjs code and html div to display the value.

var mainApp=angular.module("cspApp" , []); mainApp.controller("cspController" , function($scope,$http,$sce) {

     $scope.editfilterrules=function(){

            $http({
                    method : "GET",
                    url : 'second.php'
             }).then(function mySucces(response) {
            //  console.log(response.data);
              $scope.filterrulesDivCon=$sce.trustAsHtml(response.data);
             // $('#filterrulesDiv').html(response.data);


            }, function myError(response) {
             });
     }

angular js is not firing to updated the model values after the ajax call is successfully completed. so it's showing as {{testaa}} How can I make the angular js to rerun after the DOM is updated.

Arav
  • 4,957
  • 23
  • 77
  • 123
  • Is this about angularjs (1.x) or Angular2? Please fix the tags. Angular2 doesn't do anything with HTML added dynamically to the DOM, therefore `{{}}` in `' {{testaa}} ';` is just ignored but it's unclear from your question how the HTML gets into the DOM. Perhaps http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 is an approach that might work for you (Angular2) – Günter Zöchbauer Oct 25 '16 at 04:43
  • 1
    Search for examples using `$compile` (assuming angular1) – Paul Samsotha Oct 25 '16 at 04:44
  • yup pass the html from the ajax response through `$compile` and you should be golden. – plong0 Oct 25 '16 at 05:30
  • Have used the below code when a successful response from http ajax call is received .then(function mySucces(response) { // console.log(response.data); $scope.filterrulesDivCon=$sce.trustAsHtml(response.data); Have used the below code in html to get the html
    How can I do the compile?     – Arav Oct 26 '16 at 01:09
  • Could you update your question with your entire code instead of in the comments? – nikjohn Oct 26 '16 at 04:56
  • Have edited the code. – Arav Oct 26 '16 at 05:53
  • 1
    why are you trying to do this in this manner? this is all kinds of wrong. First of all, you shouldn't be injecting angular HTML from javascript variables, it leads to all sorts of other complications. Second of all, you are trying to inject code that has another `ng-app` directive in it, which will never work, since you can't have two angular applications on a single page (without some bootstrap hacks, which have their own issues). – Claies Oct 26 '16 at 06:15
  • if you want to insert HTML into your document, use `ng-include` or better yet, `ng-router`/`ui-router`. don't try to mix server side rendering and client side rendering, it only leads to confusion and error prone code. – Claies Oct 26 '16 at 06:17
  • Have existing php code that echo's html code. Currently everything in jquery trying to move to angular js. Was trying to inject the model in the echo'd html code as a alternative to change everything. – Arav Oct 26 '16 at 06:24
  • Using bootstrap. currently opening the modal $('#editfilterrulesModal').modal(); after the ajax call is completed. Can i keep it the same way in angular js controller code? Is there a way to open the bootstrap modal from angular js. What is the proper angular way of doing it? – Arav Oct 26 '16 at 06:27
  • 1
    If you need to show something after a click event, is it not possible to use ng-show/hide instead you insert some html from an ajax call? I assume it should be possible you can toggle a boolean value when after clicking the button or based on the value of testaa. If this is not possible you should use $compile because Angular is already loaded when you do an ajax call, for more information look at: https://docs.angularjs.org/api/ng/service/$compile – hakany Oct 26 '16 at 07:11

0 Answers0