在AngularJS中更新模型时，视图不会更新

在AngularJS中更新模型时，视图不会更新

问题的症结在于，您正在尝试将AngularJS与非常传统的“ jQuery汤式”
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;}

请注意，我们不是

click

使用jQuery 设置手动处理程序，而是使用Angular的内置

ng-click

指令。这使我们能够绑定到Angular范围生命周期，并在用户单击链接时正确更新视图。

这是来自AngularJS FAQ的引文；我加粗了一部分，可能会帮助您改掉习惯。

常见陷阱

Angular支持渠道（Freenode上的#angularjs）发现了Angular的新用户经常遇到的许多陷阱。本文档旨在在您很难找到它们之前指出它们。

DOM *** 作

停止尝试使用jQuery修改控制器中的DOM。真。这包括添加元素，删除元素，检索其内容，显示和隐藏它们。使用内置指令，或在需要时编写自己的指令来进行DOM *** 作。有关复制功能，请参见下文。

如果您想改掉习惯，请考虑从应用程序中删除jQuery。 真。Angular具有$
http服务和功能强大的指令，使其几乎总是不必要的。
Angular捆绑的jQLite具有一些在编写Angular指令时最常用的功能，尤其是绑定到事件。

最后，在您的示例中，使用此技术进行工作：http :
//jsfiddle.net/BinaryMuse/xFULR/1/