AngularJS：当引导模式重新打开时，ng-class 不刷新答案

【问题标题】：AngularJS: ng-class not refreshing when Bootstrap modal re-opensAngularJS：当引导模式重新打开时，ng-class 不刷新
【发布时间】：2018-04-18 15:16:11
【问题描述】：

我有一个带有 form 的 Bootstrap 模式，在 div 中设置了 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 设置为居中。表单处理完毕后，NewOrder.position 更新为 top，其结果如下所示。

现在的问题是：我希望 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;
};

现在的问题是，在第一次重新打开modal时，self.top被评估为“true”，即使“on show”功能被处理并在console.log中显示“false”。只有当我再次关闭模式并再次重新打开它时，它才会出错。

* 更新 *

建议的解决方案有效。我在另一个地方发现了导致最后一个错误行为的语法错误。

【问题讨论】：

标签： angularjs twitter-bootstrap bootstrap-modal

【解决方案1】：

最终答案：

请不要在 angular 中使用 JQuery 插件，angular 不会检测到函数或变量的变化。如果您使用 angular (angular bootstrap) 搜索插件名称，您将遇到一个库，该库使您能够将 Bootstrap 功能与 angular 本身一起使用 (angular UI Bootstrap)。这是写代码的正确方法，如果你使用JQuery函数，即使你这样解决和发出问题，你也会遇到另一个问题（因为angular无法完全检测到变化），请在去之前先研究一下angular插件使用纯 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;
    };
});

【讨论】：

重新打开模态时如何将进程重置为false？
好吧，也许我可以尝试在我的“隐藏”功能中插入重置...我会尝试
我不得不在我原来的“隐藏”功能上重新设置它，但有了这个添加，你的解决方案就奏效了！谢谢
不，抱歉...实际上，这解决了重新打开问题，但引入了另一个问题：未应用 mycss-position-top。 ng-class 不会在提交时重新评估，并且 html 不会刷新。我还尝试将第一个类转换为 ng-class="{'mycss-positon-center' : !process}" 以及第二个，但后来我得到了一个奇怪的行为。
@JoãoOtero {{process}} 在 html 中执行此操作并检查 process 的值，然后将 $scope.process = false 添加到打开此模式的函数中。如果没有功能，那就加个ng-click' to the element that is clicked to open the modal, and then set $scope.process = false`

【解决方案2】：

我认为当您调用 boostrap 模态时，您的 ng-class 没有初始化。你可以像这样使用 watch 语法：

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

类似的东西..

【讨论】：