当 AngularJS 中的模型更新时，视图不会更新 [英] The view is not updated when the model updates in 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(){...};...返回_this;}

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

解决方案

问题的症结在于您试图将 AngularJS 与非常传统的jQuery 汤式"混合使用.JavaScript 模式.在 Angular 中，您应该始终使用指令来进行 DOM 操作和交互(包括点击).在这种情况下，您的代码应如下所示:

<div>编号为 {{myModel.number}}</div><a ng-click="myModel.updateNumber()">更新编号</a>

function myModelCtrl($scope) {var myModel = new MyModel();$scope.myModel = myModel;}函数 MyModel() {var _this = this;_this.number = 0;_this.updateNumber = function() {_this.number += 1;alert('新号码应该显示' + _this.number);}返回_this;}

请注意，我们使用 Angular 的内置 ng-click 指令，而不是使用 jQuery 设置手动 click 处理程序.这使我们能够与 Angular 范围生命周期相关联，并在用户单击链接时正确更新视图.

这里引用了 AngularJS 常见问题；我已经加粗了可能会帮助你改掉这个习惯的部分.

<块引用>

常见的陷阱

Angular 支持频道(Freenode 上的#angularjs)发现了许多 Angular 新用户经常陷入的陷阱.本文档旨在在您艰难地发现它们之前指出它们.

DOM 操作

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

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

最后，这里是您的示例，使用此技术工作:http://jsfiddle.net/BinaryMuse/xFULR/1/

I have read threads on this issue such as: The view is not updated in AngularJS but I still can't understand how to apply it on my simple example.

I have this function:

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

when myModel is updated elsewhere in the code (when user clicks, interacts, send XHR requests) it doesn't update my view. I understand I need to do something with $apply but I didn't understand where and how.

Can someone explain to me how do I solve this issue for this simple use-case?

My model looks something like this (if that is necessary for the question) - it has no AngularJS code inside of it:

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

adding a JSfiddle example: http://jsfiddle.net/DAk8r/2/

解决方案

The crux of your problem is that you're trying to mix AngularJS with a very traditional, "jQuery-soup style" JavaScript pattern. In Angular, you should always use directives to do DOM manipulation and interaction (including clicks). In this case, your code should look more like the following:

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

Notice how, instead of setting up a manual click handler with jQuery, we use Angular's built-in ng-click directive. This allows us to tie in to the Angular scope lifecycle, and correctly update the view when the user clicks the link.

Here's a quote from the AngularJS FAQ; I've bolded a part that might help you break the habit.

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.

Finally, here your example, working using this technique: http://jsfiddle.net/BinaryMuse/xFULR/1/

这篇关于当 AngularJS 中的模型更新时，视图不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！