在AngularJS中深度监视一个集合。

10 浏览
0 Comments

在AngularJS中深度监视一个集合。

以下是我的对象：\n

$scope.steps = {
    service: {
        selected_service: '',
        selected_month: '',
        selected_year: '',
        selected_day: ''
    },
    payment: {
        selected_dd_type: '',
        cc: {
            selected_card_type: '',
            credit_card_number: '',
            name_on_card: '',
            expiry_month: '',
            expiry_year: ''
        },
        bank_acc: {
            bsb_number: '',
            account_number: '',
            account_holder_name: ''
        }
    },
    agreement: {
        agreement_acceptance: false
    }
}

\n以下是`$watchCollection`的用法：\n

$scope.$watchCollection('steps.service', function(newVal, oldVal) {
    $scope.canExit = true;
});
$scope.$watchCollection('steps.payment', function(newVal, oldVal) {
    $scope.canExit = true;
}, true);
$scope.$watchCollection('steps.payment.cc', function(newVal, oldVal) {
    $scope.canExit = true;
}, true);
$scope.$watchCollection('steps.payment.bank_acc', function(newVal, oldVal) {
    $scope.canExit = true;
}, true);
$scope.$watchCollection('steps.agreement', function(newVal, oldVal) {
    $scope.canExit = true;
}, true);

\n一切运行正常。\n一定有更好的方法来监视`$scope.steps`对象。\n如果我监视`steps`，它不会起作用。我猜Angular不能深层次地进行监视。\n

$scope.$watchCollection('steps', function(newVal, oldVal) {
    $scope.canExit = true;
}, true);

\n感谢您的指导。

0

2 答案

0 Comments

在AngularJS中，当我们需要监视一个集合的变化时，可以使用$watch来实现。但是，使用$watch会带来性能上的问题，因此有其他更好的解决方法。

首先，我们可以使用$watch传入一个函数作为参数。在这个函数中，我们可以进行所需的所有检查，并返回计算后的值。然后，我们可以在$watch的第二个参数中处理新值。例如：

$watch(
  function(){
     var calculatedVal = /*进行所有所需的检查*/;
     return calculatedVal;
  },
  function(newVal){
     $scope.canExit = true;
  }
);

另一种更好的选择是完全避免使用$watch，而是使用事件或回调函数，例如ng-change。这种方法更加高效和易于阅读。

0
0 Comments

在AngularJS中，如果我们想要深度监控一个集合，即使集合中的属性发生变化，也能触发相应的回调函数，我们可以使用$watch方法，并将第三个参数设置为true。例如，我们可以使用以下代码来进行深度监控：

$scope.$watch('steps', function(newValue, oldValue) {
     // callback on deep watch
     $scope.canExit = true;
}, true);

同时，为了避免在给$scope.steps赋值时也触发$watch，我们需要在$watch函数中添加条件判断。例如：

$scope.$watch('steps', function(newValue, oldValue) {
    if (newValue && (newValue !== oldValue)) {
        // callback on deep watch
        $scope.canExit = true;
    }
}, true);

在上面的例子中，$watch方法会监控$scope.steps的变化，并在发生变化时触发回调函数。通过判断newValue和oldValue是否相等，我们可以确定集合中的属性是否发生了变化。

另外，需要注意的是，$watchCollection方法并不支持第三个参数，因此在$watchCollection中传递第三个参数并不会产生任何效果。根据官方文档的说明，$watchCollection只会浅层监控对象的属性，因此无法满足我们的需求。

以上就是在AngularJS中实现深度监控集合的方法和原因。希望对您有所帮助！

0