AngularJS：在引导模式下重新打开

问题描述：

我有一个form一个引导模式一div组内部进行ng-class纳克级不刷新：AngularJS：在引导模式下重新打开

<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-class没有被更新。我怎么做？

我使用这个我的控制器上，但它不工作，更新纳克级：

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

***** UPDATE *****

继那仁的建议和试验一点点，我已经更新了我的代码。在我的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; 
};

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

* UPDATE *

提出的解决方案是工作。我在另一个地方发现了一个语法错误，导致了这个错误行为。

答

最终的答案：

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

如何重置过程错误重新打开模态是什么时候？ –

好吧，也许我可以尝试在我的“隐藏”功能中插入重置...我会尝试 –

我不得不在我最初的“隐藏”功能上重置它，但是通过此项添加，您的解决方案也可以正常工作！谢谢 –

答

我认为你的ng-class不是初始化，当你调用boostrap模态。您可以用手表语法类似：

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

有些事情就像..

AngularJS：在引导模式下重新打开

相关推荐