7

我已经阅读了有关此问题的线程，例如：视图未在 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/

4

4 回答 4

10

更新模型后，在控制器中尝试 $scope.$apply()

于 2013-01-17T08:08:27.083 回答
9

您的问题的症结在于您试图将 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 常见问题的引用；我已经加粗了一个可以帮助你改掉这个习惯的部分。

常见的陷阱

Angular 支持频道（Freenode 上的#angularjs）发现了许多 Angular 新用户经常陷入的陷阱。本文档旨在在您发现它们之前指出它们。

DOM 操作

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

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

最后，这里是你的例子，使用这种技术：http: //jsfiddle.net/BinaryMuse/xFULR/1/

于 2013-01-17T08:45:51.123 回答
1

http://jsfiddle.net/zCC2c/

你的问题是双重的。

1）你的jsfiddle中有一个语法错误，因为DOMElements（例如你的clickhandler中的$（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()">

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

可以在此处的第一次演讲中找到对该理论的一个很好的概述：

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

于 2013-01-17T08:29:59.697 回答
0

在 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 设置 fiddle 的“正常方式”。

于 2013-01-17T16:30:37.637 回答