当Bootstrap模式重新打开时，AngularJS:ng类不刷新

Question

我有一个带有form的Bootstrap模态，在带有ng-class:的div集合中

<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被更新到顶部，的结果显示在它的下面

现在的问题是：当模态重新打开时，我希望NewOrder.position重置为中心。然而，即使我重置NewOrder.position，ng类似乎也没有更新。我该怎么做？

我在我的控制器上使用这个，但它不能更新ng类：

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

*****更新*****

根据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被评估为"true"，即使"on show"函数被处理并在console.log中显示"false"。只有当我再次关闭模态并再次打开它时，它才会变为false。

*更新*

提议的解决方案正在发挥作用。我在另一个地方发现了一个语法错误，导致了最后一次错误行为。

Answer 1

最终答案：

请不要在angular中使用JQuery插件，angular不会检测函数或变量的变化。如果你用angular(angular bootstrap(搜索插件名称，你会遇到一个库，该库使你能够使用angular本身的bootstrap功能(angular UI bootstrap(。这是正确的代码编写方式，如果你使用JQuery函数，即使你解决了这样的问题，你也会遇到另一个问题(因为angular无法完全检测到变化(，在使用纯JQuery插件方法之前，请对angular插件进行一些研究。

JSFiddle演示

旧答案：

为什么不总是将表单作为默认值居中，并在表单提交时更新相应的类。

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

当您调用boostrap modal时，我认为您的ng类没有初始化。你可以使用这样的手表语法：

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

诸如此类的事情。。