具有相同控制器而不是新控制器的 Angular Bootstrap ui 模式 [英] Angular bootstrap ui modal with same controller instead of new controller

问题描述

我正在使用 angular bootstrap ui 模态框，它说为新控制器提供一个新的 $modalInstance.我想使用与我初始化模态框相同的控制器.我搜索但没有成功.我找到了这个链接，但没有成功 -

如何在 Angular UI Bootstrap 中为模态和非模态表单使用相同的控制器?Angular-ui bootstrap modal，无需创建新控制器

app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',controller: 'ModalInstanceCtrl',//而不是这个我想使用相同的控制器 'UserCtrl'尺寸:尺寸，解决: {项目:函数(){返回 $scope.items;}}});modalInstance.result.then(function (selectedItem) {$scope.selected = selectedItem;}， 功能 () {$log.info('Modal 在以下时间被驳回:' + new Date());});};};}]);

这样我就可以在同一个控制器上调用保存功能，该功能在模式框的保存点击时调用

解决方案

旧版本的 UI-Bootstrap 0.10.0 中是可行的下载 库.即使是最新版本，它也适用于我

index.html

<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"><script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"><!-- 按钮点击打开模态--><button ng-click="openModal()">按钮测试</button><!-- 模态--><!-- 查看 'type' 和 'id' 值--><script type="text/ng-template";id="myTestModal.tmpl.html"><div class="modal-header"><h3>模态头</h3>

<div class="modal-body"><p>模态体</p>

<div class="modal-footer"><按钮类型=按钮"class="btn btn-default";ng-click="close()";data-dismiss="modal">关闭<按钮类型=按钮"类=btn btn-primary"；ng-click="doSomething()">做某事

modalDemoController.js

$scope.openModal=function(){$scope.modalInstance=$modal.open({templateUrl: 'myTestModal.tmpl.html',范围:$范围});}$scope.close=function(){$scope.modalInstance.dismiss();//$scope.modalInstance.close() 我认为也有效};$scope.doSomething=function(){//任何要发生的动作console.log(做点什么");}

I am using angular bootstrap ui modal box it says to give a new $modalInstance for new controller.I want to use the same controller where i have initialized the modal box.I searched but no success.I found this links but no success -

How to use the same controller for modal and non-modal form in Angular UI Bootstrap? Angular-ui bootstrap modal without creating new controller

app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {

  var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl', //Instead of this i want to use the same controller 'UserCtrl'
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

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

  } ]);

So that i can call the save function on this same controller which is called on save click of modal box

解决方案

It was possible in older version of UI-Bootstrap 0.10.0 Download Library.Even latest version,it works for me

index.html

<!-- if you are using Bower -->    
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>

<!-- button click opens modal-->
<button ng-click="openModal()">Button test</button>

<!-- modal -->
<!-- look at 'type' and 'id' values -->
<script type="text/ng-template" id="myTestModal.tmpl.html">
   <div class="modal-header">
      <h3>Modal Header</h3>
   </div>   

   <div class="modal-body">
      <p>Modal Body</p>
   </div>
 
   <div class="modal-footer">
      <button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close
      </button>
      <button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something
      </button>
   </div> 
</script>

modalDemoController.js

$scope.openModal=function(){
    $scope.modalInstance=$modal.open({
        templateUrl: 'myTestModal.tmpl.html',
        scope:$scope
    });
}

$scope.close=function(){
    $scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};

$scope.doSomething=function(){
    //any actions to take place
    console.log("Do Something");
}

这篇关于具有相同控制器而不是新控制器的 Angular Bootstrap ui 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！