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

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

你的问题的关键是，你试图用一个非常传统的混合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如何，我们使用角度的内置ng-click指令。这使我们能够配合Angular范围生命周期，并在用户单击链接时正确更新视图。

下面是来自AngularJS FAQ报价;我粗体显示了一部分可能会帮助你打破习惯的部分。

常见缺陷

的角支撑通道（Freenode上#angularjs）看到许多重复的缺陷在于角落入的新用户。这份文件旨在在你发现困难之前指出它们。

DOM操作

停止尝试使用jQuery修改DOM的控制器。真。这包括添加元素，删除元素，检索其内容，显示和隐藏它们。使用内置指令，或者在必要时编写自己的指令，以执行DOM操作。请参阅下面的重复功能。

如果你正在努力打破这个习惯，可以考虑从应用中删除的jQuery。真。 Angular拥有$ http服务和强大的指令，这使得它几乎总是不必要的。 Angular捆绑的jQLite具有一些写作Angular指令最常用的特性，特别是绑定到事件。

最后，在这里你的榜样，使用这种技术的工作：http://jsfiddle.net/BinaryMuse/xFULR/1/

Answer 2

试控制器在$范围。$适用（）后，您更新模型

Answer 3

http://jsfiddle.net/zCC2c/

你的问题是双重的。

1）在jsfiddle中有一个语法错误，因为DOMElements（比如点击处理程序中的$（this）返回的a没有阻止默认设置），您实际上需要传递一个事件（小的语法问题）。

2）通过将控制器范围内的变量定义，像这样：

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

你保证它得到每类实例化运行一次。

你想要的是：

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

然后你的链接

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

，了解更详尽的codesample查看链接的jsfiddle。

理论的一个很好的概述，可以在这里先说说发现：

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

Answer 4

在角的应用程序，模型通常 有时 在$范围实施，而不是作为一个独立的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的，它显示了建立捣鼓的“正常方式”角。