Reload DOM after AJAX queries AngularJS

Question

In my project, I do an AJAX request using AngularJS who call another page that includes Angular directives (I want to make another AJAX call inside) but no interaction in loaded page.

I think new DOM isn't functionnal.. I'm trying the pseudo-code $apply unsuccessed.

Main.html :

<!DOCTYPE html>
<html data-ng-app="App">
    <head></head>
    <body >
        <div data-ng-controller="editeurMenuMobile">
            <ul>
                <li data-ng-click="callMenu('FirstAjax.html')" > <!-- Work ! -->
                    <a href="">
                        <span>Modèles</span>
                    </a>
                </li>
                <li data-ng-click="callMenu('FirstAjax.html')"> <!-- Work ! -->
                    <a href="">
                        <span>Designs</span>
                    </a>
                </li>
            </ul>
            <div data-ng-bind-html="data">
                <!-- AJAX content -->
            </div>
        </div>

        <!-- Javascript scripts -->
    </body>
</html>

FirstAjax.html :

<div data-ng-controller="editeurActionAjax">
    <div>
        <button data-ng-click="callAction('SecondAjax.html')"> <!-- Doesn't work -->
            Go
        </button>
    </div>
</div>

And my JS :

var App = angular.module('App', []);

App.controller('editeurMenuAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callMenu = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                        $scope.showAjaxError = true;
                    });
        };
    }
]);
App.controller('editeurActionAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callAction = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                    });
        };
    }
]);

Thank you for your help

why are you not using a server-side script for the called page? — serakfalcon, Jun 03 '14 at 08:05
possible duplicate of [Angularjs ng-bind-html-unsafe replacement](http://stackoverflow.com/questions/18926306/angularjs-ng-bind-html-unsafe-replacement) — Mike, Jun 04 '14 at 15:33

score 1 · Answer 1 · answered Jun 03 '14 at 08:13

From my point of view could the problem be because of the $scope?

your 2nd Controller don't have access to the same data variable.

Try to change the code to use $rootScope in both controllers instead of $scope, and see if it fix the problem.

Or

On your FirstAjax.html insert this:

<div data-ng-bind-html="data">
    <!-- AJAX content -->
</div>

This should make a second data variable inside Scope of Controller 2, so that it can place the content.

score 1 · Accepted Answer · edited May 23 '17 at 12:20

I resolve my problem with this response.

My new JS :

App.directive('bindHtmlUnsafe', function( $compile ) {
    return function( $scope, $element, $attrs ) {

        var compile = function( newHTML ) { // Create re-useable compile function
            newHTML = $compile(newHTML)($scope); // Compile html
            $element.html('').append(newHTML); // Clear and append it
        };

        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable 
                                              // Where the HTML is stored

        $scope.$watch(htmlName, function( newHTML ) { // Watch for changes to 
                                                      // the HTML
            if(!newHTML) return;
            compile(newHTML);   // Compile it
        });

    };
});

var App = angular.module('App', []);

App.controller('editeurMenuAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callMenu = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                        $scope.showAjaxError = true;
                    });
        };
    }
]);
App.controller('editeurActionAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callAction = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                    });
        };
    }
]);

And new Main.html :

<!DOCTYPE html>
<html data-ng-app="App">
    <head></head>
    <body >
        <div data-ng-controller="editeurMenuMobile">
            <ul>
                <li data-ng-click="callMenu('FirstAjax.html')" > <!-- Work ! -->
                    <a href="">
                        <span>Modèles</span>
                    </a>
                </li>
                <li data-ng-click="callMenu('FirstAjax.html')"> <!-- Work ! -->
                    <a href="">
                        <span>Designs</span>
                    </a>
                </li>
            </ul>
            <div data-bind-html-unsafe="data">
                <!-- AJAX content -->
            </div>
        </div>

        <!-- Javascript scripts -->
    </body>
</html>

And FirstAjax.html :

<div data-bind-html-unsafe='dataAction' >
    <div class="addRubrique">
        <button data-ng-click="callAction('SecondAjax.html')">
            Ajouter
        </button>
    </div>
</div>

BindHtmlUnsafe the directive re-compile the new DOM to Angular knows the DOM loaded AJAX

Reload DOM after AJAX queries AngularJS

2 Answers2