angularjs - example - Modal bootstrap de Ui angular sin crear un nuevo controlador

menu angularjs bootstrap

Question

plunk: http://plnkr.co/edit/85Wl5W Si uso la $ modalInstance en el mismo controlador (modalController.js), sin estar en un modal, se congela angular.

Solo quiero simplificar mi vida utilizando angularjs con el servicio modal bootstrap de angular-ui. Quiero usar el mismo controlador en un archivo separado, pero también en un modo modal. Es decir, quiero que hagan la misma tarea. ¿Hay alguna forma adecuada de hacerlo?

Por ejemplo, modal.html, modalController.js. Quiero mostrarlos en una ventana modal, pero también en mi aplicación sin un modal. El problema es que si uso el mismo controlador no puedo inyectar $ modalInstance, ya que no está definido si no hay modal.

Gracias por adelantado,

Alex

Answer 1

Fue posible en una versión anterior de UI-Bootstrap 0.10.0. Incluso la última versión, funciona para mí

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

Solo escribe una función en lugar de crear un nuevo archivo:

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

Answer 3

Todavía no he encontrado una solución limpia, la mejor solución que encontré para evitar escribir el mismo código dos veces fue extender el controlador modal de esta manera:

$.extend(this, $controller(''NormalCtrl'', {$scope: $scope}));

controlador completo:

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

}]);

De esa manera, puedo reutilizar el mismo código, sin tener que volver a escribirlo todo de nuevo y puedo anular las funciones que quiero hacer de manera diferente al controlador original.

Espero haber ayudado a algunas personas por ahí,

Alex