Question

我已阅读过有关此问题的帖子，例如：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/

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

请注意，我们不是使用jQuery设置手动click处理程序，而是使用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/

Answer 3

http://jsfiddle.net/zCC2c/

你的问题是双重的。

1）你的jsfiddle中存在语法错误，因为DOMElements（例如你的clickhandler中的$（this）返回的a没有阻止默认值。你实际上需要传递一个事件。（次要语法问题）。< / p>

2）将变量定义放在控制器范围内，如下所示：

 function MyCtrl($scope){
     $scope.foo = foo;
 }

确保每个类实例化都运行一次。

你想要的是：

 function MyCtrl($scope){
      $scope.someAngularClickHandler=function(){
         $scope.foo = foo;
      }
 }

然后在你的链接上

   <a href="foo" id="bar" ng-click="someAngularClickHandler()">

有关更详尽的代码示例，请参阅链接的jsfiddle。

理论的一个很好的概述可以在这里的第一次谈话中找到：

http://www.youtube.com/watch?feature=player_embedded&v=VxuN6WO3tIA

Answer 4

在Angular应用程序中，模型通常有时在$ scope上实现，而不是作为单独的JavaScript对象实现。这是重写您的应用程序，显示如何执行该操作

function myModelCtrl($scope) {
  $scope.number = 0;
  $scope.updateNumber = function () {
    $scope.number += 1;
    alert('new number should display ' + $scope.number);
  }
}

HTML：

<div ng-controller="myModelCtrl">
  <div>Number is {{number}}</div> 
  <a ng-click="updateNumber()">Update Number</a>
</div>

这是一个fiddle，没有jQuery，它显示了为Angular设置小提琴的“正常方式”。

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

4 个答案:

常见陷阱

DOM操作