更改 $scope 属性并观察更改

Question

好的，我是 AngularJS 的 1 天新手，所以这必须是超基本的（我希望不要对 AngularJS 的工作原理一无所知 - 我承认 MVC 并不是我真正的东西，但无论如何......） .

我的代码：

var PP = angular.module('PP', []);

PP.controller('documentController', function ($scope) {
    $scope.documents = [
        {
            'filename': 'Untitled-1',
            'content': 'Content-1'
        },
        {
            'filename': 'Untitled-2',
            'content': 'Content-2'
        },
        {
            'filename': 'Untitled-3',
            'content': 'Content-3'
        },
    ];
});

所以，我声明了一个模块 (PP)，其中包含一个控制器 (documentController) 和一个属性 (?) (documents)。

---

所以，我有 2 个问题：

• 如何（欢迎任何可能的方式）以编程方式访问和更改documents 数组？ （插入/删除/等）
• 如何设置一个在数组更改时触发的事件，例如已插入元素？

Answer 1

访问数组

在您的控制器中，您只需使用：

$scope.documents.push({filename: 'Another', content: 'Document'})

您可以在任何控制器函数中执行此操作，因为数组是范围内共享的变量。由于它在范围内，因此您也可以在视图中访问它，如下所示：

<button ng-click="documents.push({filename: 'Another', content: 'Document'})">
  Add document
</button>

通常，我会在控制器中为这种行为定义便利函数，以便在视图中使用，但在这个简单的示例中，应该这样做。

检测数组的变化

要查看集合中的变化，您可以使用$scope.$watchCollection：

$scope.$watchCollection('documents', function(newDocuments, oldDocuments) {
  // do something when the documents array changes
});

有关$watch 和$watchCollection 之间的比较，请参阅Scope $watch() vs. $watchCollection() In AngularJS。

请注意，手表可能很棘手：正确检测变化并不总是那么简单，根据我的经验，这些函数的调用频率比它们应该的要高。

根据您的用例，您可能不需要任何手表（Angular 提供了许多方法来对更改做出反应而无需使用单个手表），无论如何you probably shouldn't use $watch in your controllers。

Answer 2

您访问文档的方式与访问任何其他 javascript 数组的方式相同。这意味着usual operations 可用。

这是您监听变化的方式：

$scope.$watchCollection('documents', function(val){
    // documents have changed!
});