腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >有没有办法在一个控制器中使用$uibModal和$uibModalInstance来使用angular和typescript实现模式弹出？

问有没有办法在一个控制器中使用$uibModal和$uibModalInstance来使用angular和typescript实现模式弹出？
EN

Stack Overflow用户

提问于 2016-07-15 06:05:30

回答 2查看 38.2K关注 0票数 6

问题是我有一个下拉列表，我必须在该下拉菜单上打开一个模式弹出窗口，该模式弹出窗口将有两个按钮“是”或“否”。为此，我有一个控制器，其中我注入了一个依赖项。

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>

并关闭此传递的控制器:在选项中的ModalController，它使我的弹出窗口在单击"No“时关闭。但现在问题产生了，我如何再次转到" QuestionnaireController“来执行”是“功能，因为”是“功能是用QuestionnaireController编写的。

typescript

popup

modal-dialog

angular-ui-bootstrap

angularjs

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 2

Stack Overflow用户

发布于 2016-07-15 11:04:19

可以，停那儿吧!

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

  }
]);

第二模式窗口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>

第三-非常简单的视图HTML(在您的案例中- Questionnaire) SomePage示例：

<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

Stack Overflow用户

发布于 2016-09-05 20:06:28

好吧，如果你是像我一样的懒汉，下面的方法也可以;)

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

});