gpt4 book ai didi

javascript - 在 AJAX 查询 AngularJS 后重新加载 DOM

转载 作者:行者123 更新时间:2023-11-29 14:52:10 25 4
gpt4 key购买 nike

在我的项目中,我使用 AngularJS 执行 AJAX 请求,该请求调用另一个包含 Angular 指令的页面(我想在内部进行另一个 AJAX 调用)但在加载的页面中没有交互。

我认为新的 DOM 不能正常工作。我正在尝试伪代码 $apply 不成功。

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

还有我的 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() {
});
};
}
]);

谢谢你的帮助

最佳答案

从我的 Angular 来看,问题可能是因为 $scope?

您的第二个 Controller 无权访问相同的数据变量。

尝试更改代码以在两个 Controller 中使用 $rootScope 而不是 $scope,看看是否能解决问题。

或者

在您的 FirstAjax.html 上插入:

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

这应该在 Controller 2 的范围内创建第二个数据变量,以便它可以放置内容。

关于javascript - 在 AJAX 查询 AngularJS 后重新加载 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24009837/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com