在ajax调用后Angular js打开模态-不更新html [英] angular js opening modal after ajax call - not updaing html
问题描述
单击按钮后进行ajax调用,并通过angular js更新模态内的html.有时,模态内的html不会更新.尝试$ scope.$ apply();功能,但有时仍未更新.在下面提供了angular js和bootstrap代码.单击按钮后,将调用editfilterrules函数
Making an ajax call after a button click and updating the html inside the modal via angular js. Sometime html inside modal is not updating. Tried $scope.$apply(); function but still its not updating sometimes. Provided the angular js and bootstrap code below . editfilterrules function is called after clicking on a button,
$scope.editfilterrules=function(filterid,initid){
console.log('edit filter rules filterid:' + filterid + ' initid:' + initiativeid );
$http({
method : "GET",
url : 'testoptions.php?filterid=' + filterid + '&initid=' + iniid
}).then(function mySucces(response) {
// console.log(response.data);
$scope.filterrulesDivCon=$sce.trustAsHtml(response.data);
// $('#filterrulesDiv').html(response.data);
// $scope.$apply();
$('#editfilterrulesModal').modal();
}, function myError(response) {
});
}
<div class="modal fade" id="editfilterrulesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Filter Rules</h4>
</div>
<div class="modal-body">
<div id="filterrulesDiv" ng-bind-html="filterrulesDivCon" ng-cloak> </div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
推荐答案
如@llp所指出的,您正在打开角度范围之外的模态,而是可以使用非常灵活的Bootstrap UI模态.
As pointed out by @llp you are opening your modal out of angular scope,instead you can use Bootstrap UI modal which is lot flexible.
如果您不打算使用bootsrap,也可以使用 $ apply()
并执行类似的操作.
you can also use $apply()
and do something like this if you are not thinking to use bootsrap.
$scope.editfilterrules=function(filterid,initid){
console.log('edit filter rules filterid:' + filterid + ' initid:' + initiativeid );
$http({
method : "GET",
url : 'testoptions.php?filterid=' + filterid + '&initid=' + iniid
}).then(function mySucces(response) {
$scope.filterrulesDivCon=$sce.trustAsHtml(response.data);
$scope.$apply(function() {
$('#editfilterrulesModal').modal();
});
}, function myError(response) {
});
}
使用 Bootstrap UI 下面,我添加了有关如何实现此目标的示例代码段.这是一个 plunker 演示
with Bootstrap UI Below I've added a sample code snippet on how to achieve the same.Here is a plunker for demo
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);//add bootstrap dependency
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
var $ctrl = this;
$ctrl.items = ['item1', 'item2', 'item3'];
$ctrl.animationsEnabled = true;
$ctrl.open = function (size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
//this opens the modal and an instance is created and assigned to variable..
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',//HTML content
controller: 'ModalInstanceCtrl',//specific controller for modal
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
这篇关于在ajax调用后Angular js打开模态-不更新html的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!