깊은 $는

Question

가 여기 내 개체입니다 AngularJS와의 컬렉션을 볼

$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); 

모든 것이 잘 작동한다.

$watch$scope.steps 개체에 대한 더 좋은 방법이 있어야합니다.

내가 $watchsteps 인 경우 작동하지 않습니다. 각도가 충분히 깊게 볼 수없는 것 같습니다.

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

감사합니다.

Answer 1

여기 있습니다. 또한,

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

당신이 $scope.steps에 값을 할당 할 때 시계는 또한 트리거 될 것이기 때문에 당신이 시계 내부에 if 조건을 추가 확인하십시오 $watch에서 세 번째 옵션으로 값 true을 전달합니다.

근무 예 :

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 
    $scope.canExit = false; 
 

 
    $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 
 
    } 
 
    }; 
 

 
    $scope.reset = function() { 
 
    $scope.canExit = false; 
 
    } 
 

 
    // Using Math.random() just for demo so that the watch can be invoked 
 
    $scope.changeService = function() { 
 
    $scope.steps.service.selected_service = Math.random(); 
 
    } 
 

 
    $scope.changeDate = function() { 
 
    $scope.steps.payment.cc.selected_card_type = Math.random(); 
 
    } 
 

 
    $scope.changeAgreement = function() { 
 
    $scope.steps.agreement.agreement_acceptance = Math.random(); 
 
    } 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <button ng-click="changeService()">Change service</button> 
 
    <button ng-click="changeDate()">Change expiry date</button> 
 
    <button ng-click="changeAgreement()">Change agreement</button> 
 
    <br> 
 
    <br> 
 
    <br>Can exit: {{canExit}} 
 
    <button ng-click="reset()">Reset</button> 
 
</div>

Answer 2

1) caramiriel로 의견 게시, 당신은 $ 사용 함수 인수로 볼 수 있습니다;

$watch(
    function(){ 
    var calculatedVal = /*make all required checks*/; 
    return calculatedVal; 
    }, 
    function(newVal){ 
    $scope.canExit = true; 
    } 
); 

2) 더 나은 옵션은 완전히 시계를 방지하고 이벤트/콜백과 같은 NG 변화를 사용하는 것입니다; 더 읽기 쉽고 읽기가 쉽습니다.