该视图时不会更新在AngularJS模型更新 [英] The view is not updated when the model updates in AngularJS
问题描述
我已经在这个问题上阅读主题，如：视图未更新在AngularJS 的，但我仍然无法理解如何应用它在我简单的例子。
I have read threads on this issue such as: The view is not updated in AngularJS but I still can't understand how to apply it on my simple example.
我有这个功能：
function MyPageView($scope) {
var myModel = new MyModel();
$scope.myModel = myModel;
}
在基于myModel 在code（当用户点击，交互，发送XHR请求），它不更新我的观点在其他地方进行更新。我明白我需要做一些与$申请，但我不明白在哪里以及如何。
when myModel is updated elsewhere in the code (when user clicks, interacts, send XHR requests) it doesn't update my view. I understand I need to do something with $apply but I didn't understand where and how.
有人能向我解释，我该如何解决这个问题，这个简单的用例？
我的模型看起来是这样的（如果这是必要的问题） - 它有它里面没有AngularJS code：
My model looks something like this (if that is necessary for the question) - it has no AngularJS code inside of it:
var MyModel = function() {
var _this = this;
...
_this.load = function(){...};
_this.updateModel = function(){...};
...
return _this;
}
加入的jsfiddle例如： http://jsfiddle.net/DAk8r/2/
推荐答案
你的问题的关键是，你试图用一个非常传统的，jQuery的汤式的JavaScript模式混合AngularJS。在角，你应该总是使用指令做DOM操作和交互（包括点击次数）。在这种情况下，你的code应该看起来更像以下内容：
The crux of your problem is that you're trying to mix AngularJS with a very traditional, "jQuery-soup style" JavaScript pattern. In Angular, you should always use directives to do DOM manipulation and interaction (including clicks). In this case, your code should look more like the following:
<div ng-controller="myModelCtrl">
<div>Number is {{myModel.number}}</div>
<a ng-click="myModel.updateNumber()">Update Number</a>
</div>
function myModelCtrl($scope) {
var myModel = new MyModel();
$scope.myModel = myModel;
}
function MyModel() {
var _this = this;
_this.number = 0;
_this.updateNumber = function() {
_this.number += 1;
alert('new number should display ' + _this.number);
}
return _this;
}
请注意如何，而不是建立一个手动点击使用jQuery处理程序，我们使用角度的内置 NG-点击指令。这让我们在配合的角度范围的生命周期，并正确地更新，当用户点击该链接的视图。
Notice how, instead of setting up a manual click handler with jQuery, we use Angular's built-in ng-click directive. This allows us to tie in to the Angular scope lifecycle, and correctly update the view when the user clicks the link.
下面是从 AngularJS FAQ 报价;我加粗，可以帮助你打破这个习惯的一部分。
Here's a quote from the AngularJS FAQ; I've bolded a part that might help you break the habit.
的角度支持渠道（Freenode上#angularjs）看到了一些经常性陷阱的角度落入的新用户。该文件旨在你发现他们艰难地前点出来。
Common Pitfalls
The Angular support channel (#angularjs on Freenode) sees a number of recurring pitfalls that new users of Angular fall into. This document aims to point them out before you discover them the hard way.
停止尝试使用jQuery修改DOM的控制器。真。这包括添加元素，删除元素，检索其内容，显示和隐藏它们。使用内置的指令，或写自己在必要时，做你的DOM操作。可以看看下面的复制功能。
Stop trying to use jQuery to modify the DOM in controllers. Really. That includes adding elements, removing elements, retrieving their contents, showing and hiding them. Use built-in directives, or write your own where necessary, to do your DOM manipulation. See below about duplicating functionality.
如果您有困难，打破习惯，考虑你的应用程序删除的jQuery。真。角具有$ http服务和强大的指令，使得它几乎总是必要的。角的捆绑jQLite具有的书面角的指令，尤其是结合事件。最常用的功能少数
If you're struggling to break the habit, consider removing jQuery from your app. Really. Angular has the $http service and powerful directives that make it almost always unnecessary. Angular's bundled jQLite has a handful of the features most commonly used in writing Angular directives, especially binding to events.
最后，在这里你的榜样，使用这种技术的工作： http://jsfiddle.net/BinaryMuse/xFULR/1/
Finally, here your example, working using this technique: http://jsfiddle.net/BinaryMuse/xFULR/1/
这篇关于该视图时不会更新在AngularJS模型更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
