web-dev-qa-db-ja.com

Angular-ui bootstrap新しいコントローラーを作成せずにモーダル

plunk： http://plnkr.co/edit/85Wl5W 同じコントローラー（modalController.js）で$ modalInstanceを使用していて、モーダルではない場合、angularはフローズン。

Angular-ui bootstrapモーダルサービスでangularjsを使用して人生を簡素化したいだけです。同じコントローラーを別のファイルで使用したいが、モーダルでも使用したい。つまり、彼らに同じ仕事をしてもらいたいのです。それを行う適切な方法はありますか？

例えば。 modal.html、modalController.js。これらをモーダルウィンドウに表示したいのですが、モーダルなしのアプリケーションにも表示します。問題は、同じコントローラーを使用する場合、$ modalInstanceを注入できないことです。これは、モーダルがない場合は未定義であるためです。

前もって感謝します、

アレックス

angularjsmodal-dialogangular-uiangular-ui-bootstrapangularjs-controller
20
Alex Arvanitidis

私はまだクリーンなソリューションを見つけていませんが、同じコードを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');
    };

}]);

このようにして、同じコードを再利用できます。最初から書き直す必要はありません。また、元のコントローラーとは異なる機能をオーバーライドすることができます。

私がそこにいる何人かの人々を助けたいと思います、

アレックス

5
Alex Arvanitidis

古いバージョンの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");
}
29
Sajin M Aboobakkar

新しいファイルを作成する代わりに関数を書くだけです：

 $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
Anton Temchenko