web-dev-qa-db-fra.com

Existe-t-il un moyen d'utiliser $ uibModal et $ uibModalInstance dans un seul contrôleur pour implémenter un menu contextuel modal en utilisant angular with typescript?

Comme je suis un débutant angulaire avec TypeScript, je suis confronté à un problème lors de la mise en œuvre du popup modal angulaire. Le problème est que j’ai un menu déroulant sur lequel le changement doit ouvrir une fenêtre contextuelle modale et que cette fenêtre contextuelle modale aura deux boutons "Oui" ou "Non". Pour cela, j'ai un contrôleur où j'ai injecté une dépendance. 

export class QuestionnaireController {
    static ngControllerName = 'questionnaireController';
    static inject = ["$uibModal"];
    constructor(private $uibModal: ng.ui.bootstrap.IModalService) {
    }
     public openModalPopup() {
        let options: ng.ui.bootstrap.IModalSettings = {
            controller: QuestionnaireController,
            controllerAs:'ctrl',
            templateUrl: 'app/views/Dialogbox.html',

        };
      this.$uibModal.open(options);

    }
}

La plupart de mon code est écrit dans 'QuestionnaireController' et la fenêtre contextuelle s'ouvre à l'aide de ce contrôleur, mais je souhaite également fermer cette fenêtre contextuelle. J'ai donc lu un article dans lequel il était écrit que je devais créer un nouveau contrôleur "ModalController" pour créer une fenêtre contextuelle. Fermer.

export class ModalController {
    static inject = ["$uibModalInstance"];
    constructor(private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {
    }
    public close() {
        this.$uibModalInstance.close();
    }
}
Popup code is here...

<div ng-app="" id="dvModal">
<div class="modal-header">

</div>
<div class="modal-body">
    <p> Evaluated result will be discarded if you continue. Are you sure you want to continue?</p>
</div>
<div class="modal-footer">
    <input id="yesBtn" type="button" class="btn btn-default" ng-click="ctrl.Yes('true')" value="Yes" />
    <input id="npBtn" type="button" class="btn btn-default" ng-click="ctrl.close()" value="No" />
</div>

et pour fermer ce contrôleur passé: ModalController dans les options, ce qui rend mon popup fermé en cliquant sur "Non". Mais maintenant le problème est généré ici, comment je suis encore allé à "QuestionnaireController" pour faire la fonctionnalité "Oui" car la fonctionnalité "Oui" est écrite dans QuestionnaireController.

angularjstypescriptpopupmodal-dialogangular-ui-bootstrap
6
Manisha Agarwal

Oui, vous pouvez! 
$ uibModal est un outil super flexible.
Je ne connais pas très bien TypeScript, mais voici ma solution JS:

angular
.module('appName', ['ui.bootstrap'])
  .controller('SomePageController', ['$scope', '$uibModal', '$log',
    function ($scope, $uibModal, $log) {

Tout d’abord, vous voulez changer votre méthode openModalPopup () :

    // Instantiate the modal window
    var modalPopup = function () {
      return $scope.modalInstance = $uibModal.open({
        templateUrl: 'blocks/modal/dialog.html',
        scope: $scope
      });
    };

    // Modal window popup trigger 
    $scope.openModalPopup = function () {
      modalPopup().result
        .then(function (data) {
          $scope.handleSuccess(data);
        })
        .then(null, function (reason) {
          $scope.handleDismiss(reason);
        });
    };

    // Close the modal if Yes button click
    $scope.yes = function () {
      $scope.modalInstance.close('Yes Button Clicked')
    };

    // Dismiss the modal if No button click
    $scope.no = function () {
      $scope.modalInstance.dismiss('No Button Clicked')
    };

    // Log Success message
    $scope.handleSuccess = function (data) {
      $log.info('Modal closed: ' + data);
    };

    // Log Dismiss message
    $scope.handleDismiss = function (reason) {
      $log.info('Modal dismissed: ' + reason);
    }

  }
]);

Deuxième - fenêtre modale modèle HTML ressemblera à ceci:

<script type="text/ng-template" id="blocks/modal/dialog.html">
    <div class="modal-header">
      <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
      Modal content
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
      <button class="btn btn-warning" type="button" ng-click="no()">No</button>
    </div>
  </script>

Troisième - assez simple SomePage HTML (dans votre cas - Questionnaire ) Vue exemple:

<div ng-controller="SomePageController">
  <button type="button" class="btn btn-default" ng-click="openModalPopup()">Open modal</button>
</div>

Tous ensemble:

angular
  .module('appName', ['ui.bootstrap'])
  .controller('SomePageController', ['$scope', '$uibModal', '$log',
    function($scope, $uibModal, $log) {

      $scope.modalPopup = function() {
        modal = $uibModal.open({
          templateUrl: 'blocks/modal/dialog.html',
          scope: $scope
        });

        $scope.modalInstance = modal;

        return modal.result
      };


      $scope.modalPopupTrigger = function() {
        $scope.modalPopup()
          .then(function(data) {
            $scope.handleSuccess(data);
          },function(reason) {
            $scope.handleDismiss(reason);
          });
      };

      $scope.yes = function() {
        $scope.modalInstance.close('Yes Button Clicked')
      };

      $scope.no = function() {
        $scope.modalInstance.dismiss('No Button Clicked')
      };

      $scope.handleSuccess = function(data) {
        $log.info('Modal closed: ' + data);
      };

      $scope.handleDismiss = function(reason) {
        $log.info('Modal dismissed: ' + reason);
      }

    }
  ]);
<!DOCTYPE html>
<html>

<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body ng-app="appName">
  <div ng-controller="SomePageController">
    <script type="text/ng-template" id="blocks/modal/dialog.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        Modal content
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
        <button class="btn btn-warning" type="button" ng-click="no()">No</button>
      </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="modalPopupTrigger()">Open modal</button>
  </div>

  <script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.5.7/angular-animate.min.js"></script>
  <script src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/master/ui-bootstrap-tpls.min.js"></script>



</body>

</html>

12
Pavlo Shandro

Eh bien, si vous êtes ce type paresseux comme moi, ce qui suit fonctionnera également;)

var objects = [{
 name: "obj1",
 value: 1
}, {
 name: "obj2",
 value: 2
}];

// Generating the modal html

var html = "<div class='modal-header'><h4 class='modal-title'>Select Object</h4></div>";
html += "<div class='modal-body'>";
html += "<select class='form-control' ng-model='selection'>";
for (var i = 0; i < objects.length; i++) {
 var ob = objects[i];
 html += "<option value='" + ob.value + "'>" + ob.name + "</option>";
}
html += "</select>";
html += "</div>";
html += "<div class='modal-footer'>";
html += '<button type="button" ng-click="dismissModal()" class="btn btn-default" >Close</button>';
html += '<button type="button" ng-click="closeModal()" class="btn btn-primary">Select</button>';
html += "</div>";

// Showing the modal

var objectSelectionModal = $uibModal.open({
 template: html,
 controller: function($scope) {

  // The function that is called for modal closing (positive button)

  $scope.closeModal = function() {
   //Closing the model with result
    objectSelectionModal.close($scope.selection);

  };

  //The function that is called for modal dismissal(negative button)

  $scope.dismissModal = function() {
   objectSelectionModal.dismiss();
  };

 }


});

//Processing the Result
objectSelectionModal.result.then(function(selected) {
 alert(selected);

});
2
Sachin Murali G