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

Question

我已经阅读过这个问题的线程,例如:AngularJS中的视图没有更新,但我仍然无法理解如何在我的简单示例中应用它.

我有这个功能:

function MyPageView($scope) {
  var myModel = new MyModel();
  $scope.myModel = myModel;
}

何时myModel在代码中的其他位置更新(当用户单击,交互,发送XHR请求时),它不会更新我的视图.我知道我需要用$ apply做点什么,但我不知道在哪里以及如何做.

有人可以向我解释如何为这个简单的用例解决这个问题？

我的模型看起来像这样(如果问题是必要的) - 它内部没有AngularJS代码:

var MyModel = function() {
  var _this = this;
  ...
  _this.load = function(){...};
  _this.updateModel = function(){...};
  ...
  return _this;
}

添加JSfiddle示例: http ://jsfiddle.net/DAk8r/2/

Answer 1

更新模型后,在控制器内尝试$ scope.$ apply()

Answer 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;
}

请注意click,我们使用Angular的内置ng-click指令,而不是使用jQuery 设置手动处理程序.这允许我们绑定到Angular范围生命周期,并在用户单击链接时正确更新视图.

以下是AngularJS FAQ的引用; 我加粗了一个可以帮助你打破习惯的部分.

常见的陷阱

Angular支持频道(Freenode上的#angularjs)看到了Angular的新用户陷入的一些反复出现的陷阱.本文档的目的是在您发现它们之前指出它们.

DOM操作

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

如果您正在努力摆脱这种习惯,请考虑从您的应用中删除jQuery.真.Angular有$ http服务和强大的指令,几乎总是不必要的.Angular的捆绑式jQLite具有一些在编写Angular指令时最常用的特性,特别是绑定到事件.

最后,在这里你的例子,使用这种技术工作:http://jsfiddle.net/BinaryMuse/xFULR/1/