web-dev-qa-db-ja.com

単一のコントローラーで$ uibModalと$ uibModalInstanceを使用して、angular with typescriptを使用してモーダルポップアップを実装する方法はありますか？

私はangular TypeScriptで初心者ですので、実装中に問題に直面していますangularモーダルポップアップ。問題はドロップダウンが1つあることです。モーダルポップアップを開く必要があり、モーダルポップアップには「はい」または「いいえ」の2つのボタンがあります。このために、依存関係を挿入したコントローラーが1つあります。

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

    }
}

私のコードのほとんどは「QuestionnaireController」で書かれており、このコントローラを使用してポップアップが開かれていますが、このポップアップを閉じたいので、新しいコントローラ「ModalController」を作成してポップアップを作成する必要があるという記事を読みました閉じる。

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>

この渡されたControllerを閉じるには、オプションでModalControllerを選択します。これにより、「いいえ」をクリックするとポップアップが閉じます。しかし、ここで問題が生成されます。「Yes」機能はQuestionnaireControllerに記述されているため、「Yes」機能を実行するために「QuestionnaireController」に再び行きました。

angularjstypescriptpopupmodal-dialogangular-ui-bootstrap
6
Manisha Agarwal

はい、できます！
$ uibModalは非常に柔軟なツールです。
TypeScriptにはあまり馴染みがありませんが、JSソリューションは次のとおりです。

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

最初にやりたいことは、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);
    }

  }
]);

2番目-モーダルウィンドウHTMLテンプレートは次のようになります。

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

第三-非常にシンプルSomePage HTML（あなたの場合-アンケート）表示例：

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

すべて一緒に：

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

まあ、あなたが私のような怠け者なら、以下も動作します;）

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