Question

我有以下代码

angular.module('plunker', []);

angular.module('plunker').service('MyService', function () {
  this.myVar = null;

  this.setX = function() {
    this.myVar = 'x';
   };
});

angular.module('plunker').controller('ctrl', function($scope, $timeout, MyService){

  $scope.myService = MyService;

 $scope.$watch('myService.myVar', function(newval, oldval) {
   console.log(newval, oldval);
 });

  $scope.setX = MyService.setX;

 $timeout(function() {
   $scope.setX()
 }, 1000);


});

请注意作业$scope.setX = MyService.setX;。

当它在控制台中登录时，它仅打印null null。预期结果应为

null null
x null

为什么会这样？

Answer 1

您的服务功能与此变量重叠。尝试存储“this”变量：

angular.module('plunker').service('MyService', function () {
    var self = this;

    self.myVar = null;

    self.setX = function() {
        self.myVar = 'x';
    };
});

并且可选择尝试使用函数监视格式：

$scope.$watch(function() { return  $scope.myService.myVar; },
    function(newval, oldval) {
        console.log(newval, oldval);
    }
);

watch无法从服务中看到更改的变量

1 个答案: