在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">&times;</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屋！