angular $scope.$watch for array

11 浏览
0 Comments

angular $scope.$watch for array

根据这个链接中的内容：如何在angularjs中深度监视数组？，它应该起作用，但我不知道我做错了什么...\n

$scope.$watch('statuses', function(newVal, oldValue) {
      if (oldValue==newVal) return false;
      console.log("st changed");
    },true);

\n假设我以异步方式更新了$scope.statuses，例如在3秒后\n

setTimeout(function() {
    $scope.statuses.push("ahhh");
},3000);

\n但什么都没有发生...请问有什么想法吗？

0

3 答案

0 Comments

问题的原因：在使用AngularJS的$scope.$watch方法监听数组时，如果在回调函数中改变了数组的内容，界面上并不会自动更新，需要手动调用$scope.$apply方法来更新界面。

解决方法：使用$timeout方法替代setTimeout方法来延迟执行回调函数。使用$timeout方法后，AngularJS会在回调函数执行后重新绑定所有内容，从而自动更新界面。这样就不需要手动调用$scope.$apply方法了。

代码示例：

$scope.$watch('array', function() {
    // do something
    $timeout(function() {
        // code to be executed after the callback
    });
});

0
0 Comments

angular中的$scope.$watch用于监听数组的变化，通过该函数可以在数组发生变化时执行一些操作。然而，在某些情况下，可能会出现监听不到数组变化的问题。解决这个问题的方法是同时使用$scope.$apply和$scope.$watch。

$scope.$apply函数用于通知$scope进行更新。在给定的例子中，通过setTimeout函数在3秒后向statuses数组中添加了一个元素，并调用了$scope.$apply()函数。这样就可以通知$scope进行更新。

然而，即使使用了$scope.$apply，有时候仍然需要使用$scope.$watch来监听数组的变化。因为在Angular中，$apply函数只是将变化通知给$scope，而并不会自动更新$scope。所以，如果想要在数组发生变化时执行一些操作，仍然需要使用$scope.$watch函数来监听数组的变化。

总结起来，$apply函数用于通知$scope进行更新，$watch函数用于监听数组的变化。在某些情况下，可能需要同时使用这两个函数来实现对数组变化的监听和操作。

0
0 Comments

AngularJS中的$scope.$watch用于监视数组的变化。当数组发生变化时，可以执行相应的操作。

然而，在某些情况下，使用$scope.$watch监视数组并不能正常工作。下面是一个例子：

setTimeout(function() {
  $scope.$apply(function () {
    $scope.statuses.push("ahhh");
  }
},3000);

在这个例子中，我们使用setTimeout函数模拟了一个延迟3秒后执行的操作。在操作中，我们向$scope.statuses数组中添加了一个新的元素"ahhh"。

由于AngularJS无法意识到$scope的更新，所以需要使用$scope.$apply来告知AngularJS进行更新。

为了方便起见，AngularJS提供了$timeout服务，它类似于setTimeout，但默认情况下会自动将代码包装在$scope.$apply中。

因此，我们可以使用以下代码来解决问题：

$timeout(function() {
  $scope.statuses.push("ahhh");
}, 3000);

这样，我们就不再需要手动调用$scope.$apply了，$timeout会自动处理更新$scope的操作。这样，监视数组的变化就能正常工作了。

0