首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无需创建新控制器的Angular-ui引导模式

无需创建新控制器的Angular-ui引导模式
EN

Stack Overflow用户
提问于 2014-05-20 17:36:48
回答 3查看 20.6K关注 0票数 20

plunk:http://plnkr.co/edit/85Wl5W如果我在同一控制器(modalController.js)上使用$modalInstance,而不是在模式中,angular就会冻结。

我只想通过angular-ui bootstrap模式服务使用angularjs来简化我的工作。我想在一个单独的文件上使用相同的控制器,但在一个模式上也是如此。也就是说,我希望他们做同样的任务。有没有合适的方法呢?

例如,modal.html,modalController.js。我想在一个模式窗口上显示这些,但在我的应用程序上也是如此。问题是,如果我使用相同的控制器,我不能注入$modalInstance,因为如果没有模式,它是未定义的。

提前谢谢你,

亚历克斯

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-10-29 18:05:20

我还没有找到一个干净的解决方案,我发现的最好的解决办法是,避免编写相同的代码两次,就是像这样扩展模式控制器:

代码语言:javascript
复制
$.extend(this, $controller('NormalCtrl', {$scope: $scope}));

全控制器:

代码语言:javascript
复制
.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');
    };

}]);

这样,我可以重用相同的代码,而不必重新编写它,并且我可以覆盖我想要与原始控制器不同的函数。

希望我在那里帮助了一些人

亚历克斯

票数 6
EN

Stack Overflow用户

发布于 2014-10-29 15:08:51

这在老版本的UI-Bootstrap 0.10.0 .Even最新版本中是可能的,它对我来说是有效的

index.html

代码语言:javascript
复制
<!-- 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

代码语言:javascript
复制
$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");
}
票数 30
EN

Stack Overflow用户

发布于 2016-01-28 22:28:02

只需编写一个函数,而不是创建新文件:

代码语言:javascript
复制
 $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);
 }
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23756105

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档