javascript – 当AngularJS中的模型更新时,视图不会更新

我已经阅读了这个问题的线程,例如： The view is not updated in 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/

解决方法

你的问题的关键在于你正试图将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;
}

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

这是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.

最后,在这个例子中,使用这种技术：http://jsfiddle.net/BinaryMuse/xFULR/1/

原文地址：https://www.jb51.cc/js/159487.html