angularjs – 有没有办法在单个控制器中使用$uibModal和$uibModalInstance来实现使用angular with typescript的模态弹出窗口？

由于我是角色与打字稿的新手,我在实现角度模态弹出时面临一个问题.问题是我有一个下拉列表,我必须打开一个模态弹出窗口,而模态弹出窗口将有两个按钮“是”或“否”.为此,我有一个控制器,我注入了一个依赖.

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在选项中,单击“否”使我的弹出窗口关闭.但现在这个问题就产生了,我怎么再去“QuestionnaireController”做“是”功能,因为“是”功能是在QuestionnaireController中编写的.

是的你可以！
$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>

第三 – 非常简单SomePage HTML(在您的情况下 – 问卷调查)查看示例：

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

全部一起：

angular
  .module('appName',function($scope,$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>

原文链接：/angularjs/141017.html

angularjs – 有没有办法在单个控制器中使用$uibModal和$uibModalInstance来实现使用angular with typescript的模态弹出窗口？

猜你在找的Angularjs相关文章