web-dev-qa-db-fra.com

Angular-ui bootstrap modal sans créer de nouveau contrôleur

plunk: http://plnkr.co/edit/85Wl5W Si j'utilise $ modalInstance sur le même contrôleur (modalController.js), sans être dans un modal, angular obtient congelé.

Je veux simplement simplifier ma vie en utilisant angularjs avec le service modal angular-ui bootstrap. Je veux utiliser le même contrôleur sur un fichier séparé, mais aussi sur un modal. Autrement dit, je veux qu'ils fassent la même tâche. Existe-t-il un moyen approprié de le faire?

Par exemple. modal.html, modalController.js. Je veux les afficher sur une fenêtre modale, mais également sur mon application sans modal. Le problème est que si j'utilise le même contrôleur, je ne peux pas injecter $ modalInstance, car il n'est pas défini s'il n'y a pas de modal.

Merci d'avance,

Alex

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

Je n'ai pas encore trouvé de solution propre, la meilleure solution que j'ai trouvée, pour éviter d'écrire deux fois le même code était d'étendre le contrôleur modal comme ceci:

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

contrôleur complet:

.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 cette façon, je peux réutiliser le même code, sans avoir à le réécrire à nouveau et je peux remplacer les fonctions que je veux faire différemment du contrôleur d'origine.

J'espère que j'ai aidé certaines personnes là-bas,

Alex

5
Alex Arvanitidis

C'était possible dans une ancienne version de UI-Bootstrap 0.10.0. Même la dernière version, ça marche pour moi

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

Écrivez simplement une fonction au lieu de créer un nouveau fichier:

 $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