AngularJS: ng-Klasse Auffrischen nicht, wenn Bootstrap modal wieder öffnet

Question

Ich habe eine Bootstrap modal mit einem form in einem div Set mit ng-class:

<div id="modalNewOrder" class="modal fade" data-modalName="order" role="dialog" ng-controller="NewOrderController as NewOrderCtrl"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close pull-left" data-dismiss="modal">X</button>   
       <h4 class="modal-title"> 
        New order 
       </h4> 
      </div> 
      <div class="modal-body"> 

       <div ng-class="NewOrderCtrl.position"> 
        <form> 
         // input text here 
        </form> 

Wenn die modalen geladen wird, seine NewOrder.position setzt seine css zu zentrieren. Wenn das Formular verarbeitet wird, wird NewOrder.position nach oben aktualisiert und die Ergebnisse werden darunter angezeigt.

Jetzt das Problem: Ich möchte NewOrder.position zurückgesetzt werden, um zu zentrieren, wenn das Modal wieder geöffnet wird. Aber selbst wenn ich NewOrder.position zurücksetze, scheint die ng-Klasse nicht aktualisiert zu werden. Wie mache ich das?

Ich verwende auf meinem Controller, aber seine Arbeit nicht ng-Klasse zu aktualisieren:

$("#modalNewOrder").on("hidden.bs.modal", function() { 
    $(this).find('form')[0].reset();    
    self.clearQuery(); 
    self.position = "mycss-position-center";    
}); 

***** ***** UPDATE

Naren Vorschlag Nach und Experimentieren ein wenig, ich habe meinen Code aktualisiert. In meinem html Ich habe:

<div ng-class="{'mycss-position-top' : NewOrderCtrl.top, 'mycss-position-center' : !NewOrderCtrl.top}"> 

und

<form ng-submit="processing()"> 

Und in meinem Controller, ich habe:

var self = this; 
self.top = false; 

$("#modalNewOrder").on('shown.bs.modal', function() { 
    self.top = false;    
}); 

$("#modalNewOrder").on("hidden.bs.modal", function() { 
    self.top = false;  
}); 

self.processing = function(){ 
    self.top = true; 
}; 

Das Problem ist jetzt, dass in der ersten Wiedereröffnung des Modal , self.top wird als "wahr" gewertet, auch wenn die "on show" -Funktion verarbeitet wird und "false" in console.log angezeigt wird. Nur wenn ich das Modal wieder schließe und es wieder öffne, dann wird es falsch.

* UPDATE *

Die vorgeschlagene Lösung arbeitet. Ich habe einen Syntaxfehler an einem anderen Ort gefunden, der dieses letzte falsche Verhalten verursacht hat.

Answer 1

abschließende Antwort:

Bitte verwenden Sie keine JQuery Plugins in eckig, kantig tut die Funktionen oder Variablenänderungen nicht erkennen. Wenn Sie den Plugin-Namen mit eckigen (eckigen Bootstrap) googlen, werden Sie in eine Bibliothek gelangen, die es Ihnen ermöglicht, Bootstraps-Funktionalität mit eckigen selbst zu verwenden (angular UI Bootstrap). Dies ist die richtige Art, Code zu schreiben. Wenn Sie die JQuery-Funktion verwenden, stoßen Sie auch dann auf ein anderes Problem, wenn Sie dieses Problem lösen und lösen. (Bitte beachten Sie, dass angle die Änderungen nicht vollständig erkennt) mit dem Pure JQuery Plugin-Ansatz.

JSFiddle Demo

Alte Antwort:

Warum das Formular als Standard nicht immer zentriert und auf Formular die entsprechende Klasse aktualisieren.

HTML:

<div id="modalNewOrder" class="modal fade" data-modalName="order" role="dialog" ng-controller="NewOrderController as NewOrderCtrl"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close pull-left" data-dismiss="modal">X</button>   
       <h4 class="modal-title"> 
        New order 
       </h4> 
      </div> 
      <div class="modal-body"> 

       <div class="mycss-position-center" ng-class="{'mycss-position-top' : process}"> 
        <form ng-submit="processing()"> 
         // input text here 
        </form> 

JS:

app.controller('NewOrderController', function($scope) { 
    $scope.process = false; 
    $scope.processing = function(){ 
     $scope.process = true; 
    }; 
}); 

Answer 2

Ich denke, dass Ihre ng-Klasse nicht initialisiert wird, wenn Sie Boostrap modal aufrufen. Sie können Sie verwenden Uhr Syntax wie folgt aus:

$scope.$watch(' NewOrder.position', function() { 
    $scope.NewOrder.position = "mycss-position-center"; 
    }, true); 

Manche Dinge wie, dass ..