在AJAX查询AngularJS之后重新加载DOM
Reload DOM after AJAX queries AngularJS
在我的项目中,我使用AngularJS调用另一个包含Angular指令的页面(我想在内部进行另一个AJAX调用),但在加载的页面中没有交互。
我认为新的DOM没有功能…我正在尝试伪代码$apply failed .
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>
和我的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() {
});
};
}
]);
谢谢你的帮助
从我的角度来看,问题可能是因为$作用域?
你的第二个控制器不能访问相同的数据变量。
尝试更改代码,在两个控制器中使用$rootScope而不是$scope,看看它是否解决了问题。
或
在你的FirstAjax.html
上插入这个:
<div data-ng-bind-html="data">
<!-- AJAX content -->
</div>
这应该在Controller 2的Scope内创建第二个数据变量,以便它可以放置内容。
我用这个回复解决了我的问题。
我的新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() {
});
};
}
]);
和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>
和
<div data-bind-html-unsafe='dataAction' >
<div class="addRubrique">
<button data-ng-click="callAction('SecondAjax.html')">
Ajouter
</button>
</div>
</div>
BindHtmlUnsafe指令重新编译新的DOM到Angular知道加载了AJAX的DOM
相关文章:
- 加载dom后禁用媒体查询
- angularjs-bindng-click从jquery动态加载DOM
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- chrome扩展在加载dom之前注入动态css
- 删除在加载dom之后创建的动态元素
- 在完全加载 DOM 之前更改 DOM 的方法
- 加载 DOM 并使用 .Net 在服务器端执行 javascript
- 加载 DOM 后无法读取动态创建的复选框的属性
- getElementById 在加载 dom 后返回未定义
- 在完全加载DOM之前隐藏父元素
- jQuery在完全加载DOM后严格执行操作
- 使用ng视图属性时不加载DOM元素
- 如何在加载DOM元素后立即获取该元素
- 替换jquery's仅在加载DOM功能后运行
- JavaScript模糊事件不适用于加载DOM后添加的项
- 阻止加载DOM对象
- 如果在加载DOM时找不到javascript库,我该如何动态更改它
- 加载DOM后,如何使用jQuery从Select输入中获取值
- 如何在加载DOM之前开始加载iframe
- 加载dom后,使用jquery更改js代码