[英]Angular-ui bootstrap modal without creating new controller
plunk: http://plnkr.co/edit/85Wl5W If I use the $modalInstance on the same controller(modalController.js), without being in a modal, angular gets frozen. plunk: http ://plnkr.co/edit/85Wl5W如果我在同一个控制器(modalController.js)上使用$ modalInstance,而不是处于模态,则angular会被冻结。
I just want to simplify my life using angularjs with the angular-ui bootstrap modal service. 我只是想使用angular-ui bootstrap模态服务使用angularjs简化我的生活。 I want to use the same controller on a separate file, but on a modal as well. 我想在一个单独的文件上使用相同的控制器,但也在一个模态上。 That is, I want them to do the same task. 也就是说,我希望他们做同样的任务。 Is there any proper way to do it? 有没有正确的方法呢?
Eg modal.html, modalController.js. 例如modal.html,modalController.js。 I want to show these on a modal window, but on my application as well without a modal. 我想在模态窗口上显示这些,但在我的应用程序中也没有模态。 The issue is that if I use the same controller I can't inject the $modalInstance, as it's undefined if there's no modal. 问题是,如果我使用相同的控制器,我不能注入$ modalInstance,因为如果没有模态,它是未定义的。
Thanks in advance, 提前致谢,
Alex 亚历克斯
It was possible in older version of UI-Bootstrap 0.10.0 .Even latest version,it works for me 它可能在旧版本的UI-Bootstrap 0.10.0。甚至最新版本,它适用于我
<!-- 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>
<!-- 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>
$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");
}
I haven't found a clean solution yet, the best workaround I found, to avoid writing the same code twice was to extend the modal controller like this: 我还没有找到一个干净的解决方案,我发现最好的解决方法,避免两次编写相同的代码是扩展模态控制器,如下所示:
$.extend(this, $controller('NormalCtrl', {$scope: $scope}));
full controller: 完全控制器:
.controller('ModalCtrl', ['$scope', '$controller', '$modalInstance',
function ($scope, $controller, $modalInstance) {
//with this line here:
// Initialize the super class and extend it.
$.extend(this, $controller('NormalCtrl', {$scope: $scope}));
// Opens a search result
$scope.openResult = function() {
$modalInstance.close($scope.selectedRow);
};
// Called when the cancel button is pressed
$scope.back = function() {
$modalInstance.dismiss('cancel');
};
}]);
That way, I can re-use the same code, without having to rewrite it all over again and I can override the functions that I want to do smth different to the original controller. 这样,我可以重复使用相同的代码,而不必重新编写它,我可以覆盖我想要做的与原始控制器不同的函数。
Hope I helped some people out there, 希望我能帮助一些人,
Alex 亚历克斯
Just write a function instead of creating new file: 只需编写一个函数而不是创建新文件:
$scope.yourModal= function (data) {
var modalInstance = $modal.open({
template: '<div>Do you really want to hurt me? <div><button class="btn" ng-click="hurt(data)">Yes</button></div></div>',
controller: function($scope, scope){
$scope = scope;
},
resolve: {
scope: function () {
return $scope;
}
},
size: 'sm'
});
}
$scope.hurt = function(data){
console.log(data);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.