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）。

所以，我有两个问题：

如何（欢迎任何可能的方式）我能以编程方式访问和更改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!
});

更改$ scope属性并观察更改

2 个答案:

访问阵列

检测数组中的更改