我已经阅读了这个问题的线程,例如：
The view is not updated in AngularJS,但我仍然无法理解如何将它应用于我的简单示例.
@H_301_2@我有这个功能：
function MyPageView($scope) {
var myModel = new MyModel();
$scope.myModel = myModel;
}
@H_301_2@当myModel在代码中的其他位置更新时(当用户点击,交互,发送XHR请求时),它不会更新我的视图.我知道我需要用$apply做点什么,但我不知道在哪里以及如何做.
@H_301_2@有人可以向我解释如何为这个简单的用例解决这个问题？
@H_301_2@我的模型看起来像这样(如果问题是必要的) – 它内部没有AngularJS代码：
var MyModel = function() {
var _this = this;
...
_this.load = function(){...};
_this.updateModel = function(){...};
...
return _this;
}
@H_301_2@添加JSfiddle示例：http://jsfiddle.net/DAk8r/2/
解决方法
你的问题的关键在于你正试图将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;
}
@H_301_2@请注意,我们使用Angular的内置ng-click指令,而不是使用jQuery设置手动点击处理程序.这允许我们绑定到Angular范围生命周期,并在用户单击链接时正确更新视图.
@H_301_2@这是AngularJS FAQ的报价;我加粗了一个可能帮助你打破习惯的部分.
@H_301_2@最后,在这个例子中,使用这种技术：http://jsfiddle.net/BinaryMuse/xFULR/1/Common Pitfalls
@H_301_2@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
@H_301_2@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. @H_301_2@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.
