Question

我的form内置div的{{1}}引导模式，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>

加载模态时，其NewOrder.position将其css设置为center。处理表单时，NewOrder.position更新到顶部，结果显示在它下面。

现在出现问题：我希望在重新打开模态时将NewOrder.position重置为居中位置。但是，即使我重置了NewOrder.position，似乎没有更新ng-class。我该怎么做？

我在我的控制器上使用它，但它无法更新ng-class：

$("#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被评估为＆＃34; true＆＃34;，即使＆＃34; on show＆＃34;功能被处理并显示＆＃34; false＆＃34;在console.log中。只有当我再次关闭模态并再次重新打开它时，它才会变错。

*更新*

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

Answer 1

我认为当你调用boostrap模态时你的ng-class不是初始化。你可以使用这样的手表语法：

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

有点像......

Answer 2

最终答案：

请不要在角度中使用JQuery插件，角度不检测功能或变量。如果你使用angular（angular bootstrap）谷歌插件名称，你将遇到一个库，使你能够使用角度本身的Bootstraps功能（角度UI Bootstrap）。这是编写代码的正确方法，如果你使用JQuery函数，即使你这样解决和问题，你也会遇到另一个问题（因为angular无法完全检测到这些变化），请在进行之前对一个角度插件做一些研究使用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;
    };
});

AngularJS：当Bootstrap模式重新打开时，ng-class不刷新

2 个答案: