Javascript 当 AngularJS 中的模型更新时，视图不会更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14374440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The view is not updated when the model updates in AngularJS
提问by Alon
I have read threads on this issue such as: The view is not updated in AngularJSbut I still can't understand how to apply it on my simple example.
我已经阅读了有关此问题的线程，例如：AngularJS 中的视图未更新，但我仍然无法理解如何将它应用到我的简单示例中。
I have this function:
我有这个功能：
function MyPageView($scope) {
var myModel = new MyModel();
$scope.myModel = myModel;
}
when myModelis 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.
当myModel在代码中的其他地方更新时（当用户点击、交互、发送 XHR 请求时）它不会更新我的视图。我知道我需要用 $apply 做一些事情，但我不明白在哪里以及如何做。
Can someone explain to me how do I solve this issue for this simple use-case?
有人可以向我解释如何解决这个简单用例的问题吗？
My model looks something like this (if that is necessary for the question) - it has no AngularJS code inside of it:
我的模型看起来像这样（如果这对问题来说是必要的） - 它里面没有 AngularJS 代码：
var MyModel = function() {
var _this = this;
...
_this.load = function(){...};
_this.updateModel = function(){...};
...
return _this;
}
adding a JSfiddle example:http://jsfiddle.net/DAk8r/2/
添加 JSfiddle 示例：http : //jsfiddle.net/DAk8r/2/
回答by Kaushik Shrestha
try $scope.$apply() inside your controller after you update your model
更新模型后在控制器中尝试 $scope.$apply()
回答by Michelle Tilley
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:
您问题的症结在于您试图将 AngularJS 与非常传统的“jQuery-soup 风格”JavaScript 模式混合使用。在 Angular 中，您应该始终使用指令来进行 DOM 操作和交互（包括点击）。在这种情况下，您的代码应该如下所示：
<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;
}
Notice how, instead of setting up a manual clickhandler with jQuery, we use Angular's built-in ng-clickdirective. This allows us to tie in to the Angular scope lifecycle, and correctly update the view when the user clicks the link.
请注意，我们不是click使用 jQuery设置手动处理程序，而是使用 Angular 的内置ng-click指令。这允许我们与 Angular 范围生命周期相关联，并在用户单击链接时正确更新视图。
Here's a quote from the AngularJS FAQ; I've bolded a part that might help you break the habit.
这是AngularJS FAQ 中的引述；我已经加粗了可能会帮助你改掉这个习惯的部分。
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.
DOM Manipulation
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.
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.
常见的陷阱
Angular 支持频道（Freenode 上的#angularjs）发现了许多 Angular 新用户经常陷入的陷阱。本文档旨在在您艰难地发现它们之前指出它们。
DOM 操作
停止尝试使用 jQuery 修改控制器中的 DOM。真的。这包括添加元素、删除元素、检索其内容、显示和隐藏它们。使用内置指令，或在必要时编写自己的指令来进行 DOM 操作。请参阅下面有关复制功能的信息。
如果您正在努力改掉这个习惯，请考虑从您的应用程序中删除 jQuery。真的。Angular 拥有 $http 服务和强大的指令，这使得它几乎总是不必要的。Angular 捆绑的 jQLite 具有一些最常用于编写 Angular 指令的功能，尤其是绑定到事件。
Finally, here your example, working using this technique: http://jsfiddle.net/BinaryMuse/xFULR/1/
最后，这里是您的示例，使用此技术工作：http: //jsfiddle.net/BinaryMuse/xFULR/1/
回答by Abraham P
Your problem is twofold.
你的问题是双重的。
1) There was a syntax error in your jsfiddle, as DOMElements (such as the a returned by $(this) inside your clickhandler have no prevent default. You actually needed to pass an event. (Minor syntax issue).
1）在您的 jsfiddle 中存在语法错误，因为 DOMElements（例如在您的 clickhandler 中由 $(this) 返回的 a 没有阻止默认值。您实际上需要传递一个事件。（次要语法问题）。
2) By putting your variable definition within the controllers scope like so:
2）通过将您的变量定义放在控制器范围内，如下所示：
function MyCtrl($scope){
$scope.foo = foo;
}
You ensure it gets run once per class instantiation.
您确保它在每个类实例化时运行一次。
What you want is:
你想要的是：
function MyCtrl($scope){
$scope.someAngularClickHandler=function(){
$scope.foo = foo;
}
}
And then on your link
然后在你的链接上
<a href="foo" id="bar" ng-click="someAngularClickHandler()">
For a more exhaustive codesample see the linked jsfiddle.
有关更详尽的代码示例，请参阅链接的 jsfiddle。
A good overview of the theory can be found in the first talk here:
可以在此处的第一次演讲中找到对该理论的良好概述：
http://www.youtube.com/watch?feature=player_embedded&v=VxuN6WO3tIA
http://www.youtube.com/watch?feature=player_embedded&v=VxuN6WO3tIA
回答by Mark Rajcok
In Angular apps, models are normallysometimes implemented on $scope, not as a separate JavaScript object. Here is a rewrite of your app showing how to do that
在 Angular 应用程序中，模型通常在 $scope 上实现，而不是作为单独的 JavaScript 对象。这是您的应用程序的重写，展示了如何做到这一点
function myModelCtrl($scope) {
$scope.number = 0;
$scope.updateNumber = function () {
$scope.number += 1;
alert('new number should display ' + $scope.number);
}
}
HTML:
HTML：
<div ng-controller="myModelCtrl">
<div>Number is {{number}}</div>
<a ng-click="updateNumber()">Update Number</a>
</div>
Here's a fiddle, with no jQuery, and it shows the "normal way" of setting up a fiddle for Angular.
这是一个没有 jQuery的小提琴，它显示了为 Angular 设置小提琴的“正常方式”。
