Angular.js 的作用域变量正在更新，但视图没有更新

Question

我将为您进行翻译：我正在使用Angular.js与Rails作为后端，但在视图中更新作用域变量的值时遇到了问题。这里我正在尝试创建一种购物车类似的东西。

HTML代码：

<div class="modal hide fade" id="orderForm">
<div class="modal-header">
    <h3>
        Please enter your location details      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </h3>
</div>
<div class="modal-body scrollable">
    <form accept-charset="UTF-8" class="simple_form form-horizontal" name="orderForm" novalidate="novalidate" ng-submit="validateAndSubmit(orderForm)"  id="order_form">
        <div class="control-group string optional order_full_name">
            <label class="string optional control-label" for="order_full_name">Full name</label>
            <div class="controls">
                <input class="string optional required  " id="order_full_name" name="full_name" ng-model="full_name" placeholder="eg. Kapil Sharma" size="50" type="text" value="">
                </div>
            </div>


</div>
<div class="modal-footer">
    <a href="" data-dismiss="modal" aria-hidden="true" class="btn">
        Close
    </a>
    <button type="submit" class="btn btn-success"> <i class="icon-ok"></i>&nbsp;Place order</button>
    <%# end %>
</form>
</div>

这是一个Bootstrap模态窗口，可以通过$('#orderForm').modal('show');进行调用。

以下是我的JavaScript Angular代码。

$scope.validateAndSubmit = function(form){          
if(form.$valid){
    var formData = $('#order_form').serializeObject();; 

    $http.post('/create_order',{'order': formData})
    .success(function(data,status){
        $scope.currentOrder = data;
        $('#orderForm').modal('hide');
        $scope.currentOrder = [];
    }).error(function(data,status){
    //show error
        alert("error");
    });
}
else{
    alert("invalid form");
}

}

问题出在我的作用域变量 $scope.currentOrder 上，在所有其他函数中都正常工作，但在 validateAndSubmit 方法中没有按照要求更新视图，我已经使用 JavaScript 的 setInterval 方法检查了作用域变量的值。

        setInterval(function(){
        alert($scope.currentOrder);
    }
    , 5000);

更新后的值在提示框中是正确的，但视图没有更新该值，请帮忙解决。先谢谢了。

- Abhimanyu

---

不要将jQuery与Angular混用，这会带来很多麻烦。如果你想使用Bootstrap模态框，请查看http://angular-ui.github.io/bootstrap/。另外，你设置了`currentOrder = data，然后在两行之后又设置为currentOrder = []`，这样做正确吗？请提供更多代码或者访问http://jsfiddle.net以获取帮助。 - Mark Coleman

为什么要使用jQuery从表单中提取数据？表单字段应映射到当前$scope中定义的变量。此外，当您提交时，Angular会处理序列化。Mark是正确的-不要使用jQuery。如果您觉得需要jQuery，请停下来思考，因为您可能正在做错事。还要注意，您正在从控制器访问DOM。这很糟糕。您永远不应该这样做。 - Jarad DeLorenzo

我在其他 $scope 方法中使用了 jQuery，所有其他的 scope 变量都很好，只是在这里遇到了问题，为什么我不能在这里使用它？并且请注意，我已经尝试从代码中删除 'currentOrder = data;'，但错误仍然存在。 - Abhimanyu

是的，但它没有起作用。 - Abhimanyu

我所阅读的所有内容都表示不要混合使用jQuery和Angular。最接近的做法是使用类似以下的代码：angular.element（'#my_element_id'）.modal（action），即使这样我也不确定这是否是一个好主意... - Allen Maxwell

Answer 1

看起来回调函数是在作用域之外被调用的，你需要在你的回调函数中添加$scope.$apply();，这样当你想要更新视图时就会使其更新。

- TheSharpieOne