2015-08-24 1 views
1

je modal invoqué avec des balises HTML seulement:AngularStrap - modal ne cache pas

<button class="btn btn-xs stop" data-template-url="template/modal.html" 
     bs-modal="modal"> 
</button> 

mais après que je ne peux fermer mon modal avec le bouton « Fermer », pas « Enregistrer les modifications ».

Ceci est mon modèle modal externe:

<div class="modal" id="modal" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-dialog" role="document" ng-controller="modalController"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title" id="task_id"> Task #{{clickedStop}}</h4> 
     </div> 
     <div class="modal-body"> 
      <textarea id="description" class="form-control" placeholder="Description of work on a task"></textarea> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" ng-click="$hide()">Close</button> 
      <button type="button" class="btn btn-primary" ng-click="saveModal()">Save changes</button> 
     </div> 
    </div> 
</div> 

et mon modalController:

app.controller('modalController', function($scope, $rootScope){ 

$scope.saveModal = function(){ 

    $scope.ticket_id = $rootScope.clickedStop; 
    var tickets = localStorage.getItem($scope.ticket_id); 
    var task = JSON.parse(tickets); 

    $scope.description = jQuery("#description").val(); 
    if($scope.description == "" || $scope.description == undefined) 
    { 
     alert("You must enter description!"); 
     return; 
    }; 

    var save = JSON.stringify({ 
     ":task_id":$scope.ticket_id, 
     ":creator":task.creator, 
     ":date_created":task.start, 
     ":owner":task.owner, 
     ":title":task.title, 
     ":description":$scope.description 
    }); 

     jQuery.ajax({ 
      url:"engine/saveActivity.php", 
      method: "POST", 
      data:{data:save}, 
      dataType:'json' 
     }) 
      .success(function (responce){ 
      if (responce === true){ 
       console.log("Activity saved!"); 
       //I wont to close modal here 

      } 

     }).error(function(data){ 
       console.log("Error Activity save!"+ data); 
      }); 

}; 

Quand j'ai essayé d'utiliser $hide(), je reçois une erreur qui $hide est pas une fonction .

+0

Avez-vous une référence à votre modal? Comment et où l'ouvrez-vous? Vous ne pouvez pas simplement appeler $ hide puisque ce n'est pas une fonction, donc vous cherchez probablement $ ('# votre-modal'). Hide() –

+0

J'ouvre modal en cliquant sur un bouton. Comme vous pouvez le voir il y a 'bs-modal =" modal "' à la fin de la balise. J'ai essayé '$ ('# modal'). Hide()', mais rien –

+0

Je pense que ce http://stackoverflow.com/a/25446099/4571812 pourrait vous aider –

Répondre

1

$hide() ne fonctionne pas parce que ne vous pas inclus le service $modal:

app.controller('modalController', function($scope, $rootScope, $modal) { 
                   ^^^^^^ 

maintenant ng-click="$hide()" fonctionnera comme prévu. Comme l'indique le docs:

Ajoutez un attribut bs-modal à n'importe quel élément pour activer la directive.

Le module expose également un service $ modal Disponible pour l'utilisation par programme (à l'intérieur d'une directive/contrôleur).

Mais vous devez l'inclure afin de pouvoir l'utiliser.