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

一尘不染

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

angularjs

我已经阅读了有关此问题的主题，例如：[\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/

阅读 219

2020-07-04

共1个答案

一尘不染

问题的症结在于，您正在尝试将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/

2020-07-04