Question

我正在尝试确定在应用特定过滤器/转换之前我需要注意的页面上的内容。要做到这一点，我使用$ watch，以便我知道这个值已设置/设置它。问题是我不知道在$ scope中要注意哪个变量。$ watch因为我正在使用加载和设置变量的外部库。

如何打印或确切地了解监视功能中正在监视的变量。我目前有以下内容：

$scope.$watch(function(){
  console.log("Variable Set");
})

我怎么能这样做：

$scope.$watch(function(){
  console.log("watching: " + scopeItemModified);
})

因此，当我点击网页上的某个项目时，我可以确切地看到正在更改/观看的内容。

Answer 1

不能简单地打印相同的变量，但您可以像这样观看整个范围。

  $scope.$watchCollection(function(){return $scope;},function(n,o){
    alert(o);
  })

Answer 2

您必须观察范围的一个变量，它将是这样的：

$scope.nameOfVariableInScope = '';

$scope.$watch('nameOfVariableInScope', function(newValue, oldValue) {
      console.log('Lets see the new value and the old value of my variable:');
      console.log(newValue, oldValue);
});

希望有所帮助：）

Answer 3

有了这个（真的）奇怪的角色黑客，我认为它可以解决你的问题...

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.first = '1';
    $scope.second = '2';
    $scope.objectField = {
        third: '3'
    };
    
    var scopeCloned = {}
    
    $scope.$watchCollection(
        function(scope) {
            
            //We compare each scope fields previoulsy copied
            //If there is a change, we save that in console
            angular.forEach(scope, function(value, key) {
                if(key.substring(0, 1) != '$' && key != 'this') {
                    if(!angular.equals(scopeCloned[key],value)) {
                        var changes = {
                            field: key,
                            prevValue: scopeCloned[key],
                            newValue: value
                        }
                        console.log(changes);
                    }
                }
            });
            
            //We copy scope fields (without angular fields) to compare next time
            angular.forEach(scope, function(value, key) {
                if(key.substring(0, 1) != '$' && key != 'this') {
                	scopeCloned[key] = angular.copy(value);
                }
            });
        }, function() {}
    );
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <input type="text" ng-model="first"/><br>
    <input type="text" ng-model="second"/><br>
    <input type="text" ng-model="objectField.third"/><br>
</div>

如何准确找出$ scope中的变化。$ watch

3 个答案: