it-swarm.com.de

Gibt es eine Möglichkeit, $ uibModal und $ uibModalInstance in einem einzelnen Controller zu verwenden, um ein modales Popup unter Verwendung von Winkel mit Typoscript zu implementieren?

Ich bin ein Neuling in Winkelung mit TypeScript und stehe vor einem Problem, während er das modulare Einblendungsfenster implementiert. Das Problem ist, ich habe eine Dropdown-Liste, bei der ich ein modales Popup-Fenster öffnen muss, und dieses modale Popup-Fenster hat zwei Schaltflächen "Ja" oder "Nein". Dafür habe ich einen Controller, in den ich eine Abhängigkeit injiziert habe. 

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);

    }
}

Der größte Teil meines Codes ist in "QuestionnaireController" geschrieben, und das Popup-Fenster wird mit diesem Controller geöffnet. Ich möchte dieses Popup-Fenster jedoch schließen. Daher habe ich einen Artikel gelesen, in dem geschrieben wurde, dass ich einen neuen Controller "ModalController" erstellen muss, um Popup zu erstellen schließen.

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>

und zum Schließen dieses übergebenen Controllers: ModalController in Optionen, die mein Popup-Fenster durch Klicken auf "Nein" schließen. Nun aber wird hier das Problem generiert, wie ich wieder zu "QuestionnaireController" ging, um die "Ja" -Funktionalität zu tun, da die "Ja" -Funktionalität in QuestionnaireController geschrieben ist.

6
Manisha Agarwal

Ja, du kannst! 
$ uibModal ist ein äußerst flexibles Werkzeug.
Ich bin nicht sehr vertraut mit TypeScript, aber hier ist meine JS-Lösung:

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

Zuerst möchten Sie Ihre openModalPopup () - Methode ändern:

    // 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);
    }

  }
]);

Zweitens - modales Fenster HTML-Vorlage sieht folgendermaßen aus:

<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>

Drittens - ziemlich einfach SomePage HTML (in Ihrem Fall - Fragebogen ) Ansicht Beispiel:

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

Alle zusammen:

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

Wenn du so ein fauler Kerl bist wie ich, dann wird das Folgende auch funktionieren;)

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