Question

有没有办法检测AngularJS中观察属性的变化来源？

例如（非常简陋），我有全球价值：

let watchMe = 0;

我在以下组件中观看：

$scope.$watch(() => {
  return watchMe;
}, (newValue, oldValue) => {
  if(newValue !== oldValue) {
    console.log(`watchMe changed to ${newValue}, but who changed it??`);
  }
});

Answer 1

这是不可能的。

检测它的方法是使用设置值的函数。因为您应该知道使用此特定函数的位置，您可以确定代码的哪个部分称为函数。

Answer 2

Angular的$watch回调的方法签名是function(newVal, oldVal, scope)。由于这是您可以使用的唯一信息，因此您无法确定在$watch回调中更改了值的内容。

但是，如果仅在合理数量的位置更改watchMe值，则可以放弃$watch，而是使用$broadcast和$on来管理对{1}}的更改你的价值观。

$broadcast的优点是它允许您随意传递任意数据。您可以将事件与传递的数据一起使用，以确定导致更改的原因。

angular.module('myApp', [])
  .controller('BugController', ['$scope', '$rootScope', '$interval', BugController]);

function BugController($scope, $rootScope, $interval) {
  $scope.bugCount = 5;
  $scope.message = "Let's fix those bugs!";

  $scope.changeBug = function(change, person) {
    var oldValue = $scope.bugCount;
    var newValue = $scope.bugCount = Math.max(0, $scope.bugCount + change);

    if (oldValue !== newValue) {
      //$broadcast an event.
      //parameters indicate the change in value and who changed it.
      $rootScope.$broadcast('bugs-changed', newValue, oldValue, person);
    }

  };

  //Listen for bugs-changed events
  //Use the included parameters to identify who caused the value to change.
  $scope.$on('bugs-changed', function(event, newValue, oldValue, person) {
    $scope.message = person +
      ' changed bugCount from ' +
      oldValue + ' to ' + newValue + '.';
      
    if (newValue > oldValue) {
      $scope.message += ' Dang it, ' + person + '!';
    }
    else {
      $scope.message += ' Good job, ' + person + '!';
    }
  });
  
  //And random bugs pop up over time
  $interval(function() {
    $rootScope.$broadcast('bugs-changed', $scope.bugCount + 1, $scope.bugCount++, 'Time')
  }, 5000);

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="BugController">
    <div>Bugs: {{bugCount}}</div>
    <p>{{message}}</p>
    <p>
      Alex
      <button ng-click="changeBug(1, 'Alex')">Add bug</button>
      <button ng-click="changeBug(-1, 'Alex')">Fix bug</button>
    </p>

    <p>
      David
      <button ng-click="changeBug(1, 'David')">Add bug</button>
      <button ng-click="changeBug(2, 'David')">Fix bug</button>
    </p>

  </div>

</div>

检测观察者变化的来源？

2 个答案: