Ricarica DOM DOPO AJAX Query Angularjs

StackOverflow https://stackoverflow.com//questions/24009837

Domanda

Nel mio progetto, faccio una richiesta Ajax usando AngularJS che chiamano un'altra pagina che include direttive angolari (voglio fare un'altra chiamata AJAX all'interno) ma nessuna interazione nella pagina caricata.

Penso che New Dom non sia funzionante .. Sto provando il Pseudo-Code $ Applicare non protetto.

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>
.

firsdajax.html: 

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

E il mio 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() {
                    });
        };
    }
]);
.

Grazie per il tuo aiuto

È stato utile?

Soluzione 2

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

Altri suggerimenti

Dal mio punto di vista potrebbe essere il problema a causa della portata $?

Il tuo 2 ° controller non ha accesso alla stessa variabile di dati.

Prova a modificare il codice per utilizzare $ rootscope in entrambi i controller invece di $ ambito e vedere se risolve il problema.

o

Sul tuo FirstAjax.html Inserisci questo: 

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

Questo dovrebbe creare una seconda variabile di dati all'interno del controller 2, in modo che possa posizionare il contenuto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top