Angular-ui bootstrap模式,无需创建新控制器

Question

plunk:http://plnkr.co/edit/85Wl5W如果我在同一个控制器(modalController.js)上使用$ modalInstance,而不是处于模态,则angular会被冻结.

我只想用angular-ui bootstrap模态服务使用angularjs来简化我的生活.我想在一个单独的文件上使用相同的控制器,但也在一个模态上.也就是说,我希望他们做同样的任务.有没有正确的方法呢？

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

提前致谢,

亚历克斯

Answer 1

它可能在旧版本的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>

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

Answer 2

我还没有找到一个干净的解决方案,我发现最好的解决方法,避免两次编写相同的代码是扩展模态控制器,如下所示:

$.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');
    };

}]);

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

希望我能帮助一些人,

亚历克斯