无需创建新控制器的Angular-ui引导模式
无需创建新控制器的Angular-ui引导模式
提问于 2014-05-20 17:36:48
plunk：http://plnkr.co/edit/85Wl5W如果我在同一控制器(modalController.js)上使用$modalInstance，而不是在模式中，angular就会冻结。
我只想通过angular-ui bootstrap模式服务使用angularjs来简化我的工作。我想在一个单独的文件上使用相同的控制器，但在一个模式上也是如此。也就是说，我希望他们做同样的任务。有没有合适的方法呢？
例如，modal.html，modalController.js。我想在一个模式窗口上显示这些，但在我的应用程序上也是如此。问题是，如果我使用相同的控制器，我不能注入$modalInstance，因为如果没有模式，它是未定义的。
提前谢谢你，
亚历克斯
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-29 18:05:20
我还没有找到一个干净的解决方案，我发现的最好的解决办法是，避免编写相同的代码两次，就是像这样扩展模式控制器：
$.extend(this, $controller('NormalCtrl', {$scope: $scope}));全控制器：
.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');
};
}]);这样，我可以重用相同的代码，而不必重新编写它，并且我可以覆盖我想要与原始控制器不同的函数。
希望我在那里帮助了一些人
亚历克斯
Stack Overflow用户
发布于 2014-10-29 15:08:51
这在老版本的UI-Bootstrap 0.10.0 .Even最新版本中是可能的，它对我来说是有效的
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>
<!-- 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");
}Stack Overflow用户
发布于 2016-01-28 22:28:02
只需编写一个函数，而不是创建新文件：
$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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23756105
复制相关文章
相似问题
腾讯云开发者
