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({)中删除控制器来修复它。