Синтаксис для просмотра модальных и выполнения функции после показа - PullRequest
Новая
       9

Синтаксис для просмотра модальных и выполнения функции после показа

0 голосов
/ 15 октября 2018

Я видел такие вещи, о которых спрашивали, и нашел несколько хороших ссылок, однако ни одна из них не работает в моей среде, поэтому мне интересно, есть ли более общий способ.У меня есть модал с назначенным идентификатором: 

<div id="sandbox" class="modal-header modal-header-interaction" ng-init="init()">

ng-init вызывает контроллер нормально, так что я мог просто установить слушатель там, но я не смог определить правильный синтаксис.До сих пор я пробовал это: 

    $( "#sandbox" ).on('shown', function(){
        alert("Shown!");
    });

Это: 

    $('#sandbox').hasClass('in', function(){
        alert("Shown!");
    });

Это: 

$(window).on("shown", function(e) {
    $('#sandbox').modal('show');
    alert('OK');
});

... Я чувствую, что я очень близокздесь кто-нибудь знает, где я могу пойти не так?

РЕДАКТИРОВАТЬ

Дополнительная информация:

Эти модалы создаются на фабрике, где: 

 var dialogOptions = {
     templateUrl: 'views/sandbox/template/custom-plan/custom-sandbox-model-window.html',
     controller: 'customPlanDataCtrl'
 }

И вызов: 

ModalDialogFactory.showDialog(dialogOptions);

Модальная фабрика диалогов возвращает это: 

   return {
        showDialog: function (modalOptions) {
            var modalConfig = {};
            angular.extend(modalConfig, modalDialogDefaults, modalOptions);
            modalInstance = $modal.open(modalConfig);
            modalInstance.rendered.then(() => {
                alert('OK');
            });
            return modalInstance.result;
        }
    }

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Как я уже упоминал в комментарии, я настоятельно рекомендую использовать встроенную реализацию AngularJS, например, предоставляемую UI Bootstrap .Вот очень простая реализация модального режима ($uibModal), показывающая, как вы можете предпринять определенные действия, когда модальный режим открывается, отображается и закрывается / отклоняется. 

angular.module('app', ['ui.bootstrap'])
  .controller('ctrl', ($scope, $uibModal) => {
    $scope.showModal = () => {
      console.log('showing modal...');
      var modalOptions = {
        backdrop: 'static',
        templateUrl: 'modalSample.html',
        controller: ($scope, $uibModalInstance) => {
          $scope.Ok = () => $uibModalInstance.close('can use any primitive or object here');
        }
      };

      var modal = $uibModal.open(modalOptions);
      debugger;
      modal.opened.then(() => {
        console.log('modal opened');
        });
      modal.rendered.then(() => {
        console.log('modal rendered');
        });
      modal.result.then((data) => {
          console.log('modal closed with response: ' + data);
        })
        .catch(() => {
          console.log('modal dismissed');
        });
    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="app" ng-controller="ctrl" style="padding: 20px;">
  <button class="btn btn-primary" ng-click="showModal()">Show Modal</button>
  <script type="text/ng-template" id="modalSample.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal Sample</h3>
    </div>
    <div class="modal-body">
      Here is the body of the modal. Press [Esc] to dismiss this modal or close it using the button to observe the difference between closing and dimissing.
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" ng-click="Ok()">OK</button>
    </div>
  </script>
</div>
0 голосов
/ 15 октября 2018

Создайте свой собственный триггер 

(function($) {
    $.each(['show', 'hide'], function(i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function() {
            this.trigger(ev);
            return el.apply(this, arguments);
        };
    });
})(jQuery);

Перейдите по этой ссылке

Источник

...