Reload dom nach Ajax-Anfragen Angularjs
-
21-12-2019 - |
Frage
In meinem Projekt mache ich eine AJAX-Anforderung mit Angularjs, die eine andere Seite nennt, mit der Winkelrichtlinien einschließt (ich möchte einen anderen Ajax-Anruf anrufen), aber keine Interaktion in geladener Seite.
Ich denke, dass neues Dom nicht funktionslos ist. Ich versuche den Pseudo-Code $ nicht erfolgreich.
main.html:
generasacodicetagpre.erstajax.html:
generasacodicetagpre.und meine js:
generasacodicetagpre.Vielen Dank für Ihre Hilfe
Lösung 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
Andere Tipps
Aus meiner Sicht könnte das Problem wegen des $ -Applers sein?
Ihr zweiter Controller hat keinen Zugriff auf dieselbe Datenvariable.
Versuchen Sie, den Code zu ändern, um $ Rootscope in beiden Controllern anstelle von $ $ scope zu verwenden, und sehen Sie, ob das Problem behoben ist.
oder
auf Ihrem generationspoDicetagcode-Einsatz Folgendes:
generasacodicetagpre.Dies sollte eine zweite Datenvariable im Rahmen des Controllers 2 erstellen, sodass er den Inhalt platzieren kann.