角引导ui模态与同一控制器而不是新的控制器

时间:2021-11-01 11:56:56

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 -

我正在使用角引导ui模态盒它说给新控制器一个新的$modalInstance。我要使用相同的控制器来初始化模式框。我寻找,但没有成功。我找到了这个链接,但没有成功

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

如何使用相同的控制器来实现角UI引导的模态和非模态形式?Angular-ui引导模式,不创建新的控制器

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

这样我就可以在这个控制器上调用save函数了,这个控制器是在modal box的save click中调用的。

2 个解决方案

#1


19  

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

在旧版本的UI-Bootstrap 0.10.0下载库中,这是可能的。即使是最新版本,它也适用于我。

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

#2


0  

I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])

我有一个类似的问题,但是我通过在$uibModal.open({)中删除控制器来修复它。

#1


19  

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

在旧版本的UI-Bootstrap 0.10.0下载库中,这是可能的。即使是最新版本,它也适用于我。

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

#2


0  

I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])

我有一个类似的问题,但是我通过在$uibModal.open({)中删除控制器来修复它。