单击时未打开模态表单

Posted 2023-02-23

【中文标题】单击时未打开模态表单

【英文标题】：Modal form not opening on click

【发布时间】：2017-04-21 07:41:07

【问题描述】：

我有以下角度 html，试图在单击按钮时打开模式表单。该代码可以很好地创建按钮，但单击它不会执行任何操作。

为什么按钮没有打开表单？

var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) 

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function() 

    var modalInstance = $modal.open(
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: 
        items: function() 
          return $scope.items;
        
      
    );

    modalInstance.result.then(function(selectedItem) 
      $scope.selected = selectedItem;
    , function() 
      $log.info('Modal dismissed at: ' + new Date());
    );
  ;
;

var ModalInstanceCtrl = function($scope, $modalInstance, items) 

  $scope.items = items;
  $scope.selected = 
    item: $scope.items[0]
  ;

  $scope.ok = function() 
    $modalInstance.close($scope.selected.item);
  ;

  $scope.cancel = function() 
    $modalInstance.dismiss('cancel');
  ;
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3>I'm a modal!</h3>
    </div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">
          <a ng-click="selected.item = item"> item </a>
        </li>
      </ul>
      Selected: <b> selected.item </b>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
  </script>
  <h1>GWAT Websites and Designs</h1>
  <button class="btn" ng-click="open()">Submit new post</button>
</div>

【问题讨论】：

您可以尝试在open 函数范围之外定义modalInstance 吗？

不确定你是否需要变量 modalInstance 只是 $modal.open().then 应该可以工作。

【参考方案1】：

我做了这些改变：

包括<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 添加ng-app="plunker" 注册控制器：myMod.controller('ModalDemoCtrl', ModalDemoCtrl); myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl); 添加<p>Selected: selected</p> 以查看模式中的选定项目 将$modal 更改为$uibModal 和$modalInstance 更改为$uibModalInstance

var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $uibModal, $log) 
  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function() 
    var modalInstance = $uibModal.open(
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: 
        items: function() 
          return $scope.items;
        
      
    );

    modalInstance.result.then(function(selectedItem) 
      $scope.selected = selectedItem;
    , function() 
      $log.info('Modal dismissed at: ' + new Date());
    );
  ;
;

var ModalInstanceCtrl = function($scope, $uibModalInstance, items)  
  $scope.items = items;
  $scope.selected = 
    item: $scope.items[0]
  ;

  $scope.ok = function() 
    $uibModalInstance.close($scope.selected.item);
  ;

  $scope.cancel = function() 
    $uibModalInstance.dismiss('cancel');
  ;
;

myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<div ng-app='plunker' ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3>I'm a modal!</h3>
    </div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">
          <a ng-click="selected.item = item"> item </a>
        </li>
      </ul>
      Selected: <b> selected.item </b>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
  </script>
  <h1>GWAT Websites and Designs</h1>
  <p>Selected: selected</p>
  <button class="btn" ng-click="open()">Submit new post</button>
</div>

【讨论】：

非常感谢您的帮助，所以如果我理解正确，我对模态表单现在的工作方式大多有点过时了？

是的，只有旧版本的 ui-bootstrap 库使用 $modal 和 $modalInstace