AngularJS：NG-クラスのブートストラップモーダル再オープンし

Question

をリフレッシュしていない私はng-classとdivセット内部formとブートストラップモーダルを持っている：モーダルがロードされると

<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> 

、そのNewOrder.positionは、その設定されますcssを中心にする。フォームが処理されると、NewOrder.positionがtopに更新され、その結果がその下に表示されます。

問題点：モーダルを再オープンしたときに、NewOrder.positionが中央にリセットされるようにします。ただし、NewOrder.positionをリセットしても、ng-classが更新されていないようです。それ、どうやったら出来るの？

私は私のコントローラでこれを使用していますが、更新するために働いていないそのNGを-クラス：

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

***** ***** UPDATE

Narenの提案と実験後ちょっと、コードを更新しました。私のHTMLでは、私が持っている：

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

と

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

そして、私のコントローラでは、私が持っている：

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

問題は今ではモーダルの最初の再オープンでありますself.topは "on show"機能が処理されても "true"と評価され、console.logに "false"が表示されます。モダルをもう一度閉じてもう一度開いた場合にのみ、それは間違いになります。

* UPDATE *

提案された解決策は、働いていました。この最後の間違った動作を引き起こしていた別の場所で構文エラーが見つかりました。

Answer 1

最終的な答え：

角度、角度DOEの中にjQueryのプラグインを使用しないでくださいを関数や変数の変更を検出しません。角度（角度ブートストラップ）のプラグイン名をgoogleに設定すると、ブートストラップ機能を角度（角度UIブートストラップ）とともに使用できるようにするライブラリが実行されます。これはコードを書くための適切な方法です.JQuery関数を使用すると、このように解決して発行しても、角度が変更を完全に検出できないため、別の問題が発生します。移動する前に角型プラグインを調べてくださいPure JQueryプラグインのアプローチを使用します。

JSFiddle Demo

旧回答：

なぜ常にデフォルトとして、フォーム対応するクラスを更新提出上のフォームを中央に配置されません。

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

私はあなたのブーストラップモーダルを呼び出すと、あなたのngクラスが初期化されていないと思います。 あなたは、あなたがそのような時計の構文を使用することができます。

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

そのようないくつかのことを...