你能重复使用 $scope.$watch答案

【问题标题】：Can you reuse $scope.$watch你能重复使用 $scope.$watch
【发布时间】：2016-02-21 22:59:26
【问题描述】：

我发现了一些我想复制/粘贴并在两个控制器中使用的代码。它在看东西。

$scope.$watch('thing', function (thing) {
  // do cool stuff with thing
}

而不是复制/粘贴，我想把它放在一个服务中，并像这样使用来自两个控制器的服务：

angular.module('myApp')
.factory('CoolService',
  function () {
    $scope.$watch('thing', function (thing) {
      // do cool stuff with thing
    }
}

现在如果我这样做，它不会知道$scope 是什么，对吧？（根据一些阅读，它不会让我这样做。）

不过，我想说，如果你有这项服务，你就会得到这款手表。

有一个提示我可以这样做：Passing current scope to an AngularJS Service

所以我拿了他的例子，修复了它，scope.watch 在那里工作，但现在我不能在手表内设置其他范围变量。我只是不知道足够的javascript来做到这一点，但我很接近。我真的认为它可以使用正确的语法...

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

angular.module('blah').factory('BlahService', function() {
  //constructor
  function BlahService(scope) {
      this._scope = scope;
      this.myFunc = function(){
        this._scope.otherVar = this._scope.someVar;
      };
      this._scope.$watch('someVar', function(someVar) {
        // do cool stuff with thing
        _scope.otherVar = this._scope.someVar; // undefined
        this._scope.otherVar = this._scope.someVar; // undefined
        this.myFunc(); // undefined
        BlahService.prototype._someFunction(); // works, but...
        return someVar;
      });

    }

    //wherever you'd reference the scope
  BlahService.prototype._someFunction = function() {
    if (this._scope['someVar'] == 1) // undefined
      this._scope['someVar']++;
  }

  return BlahService;

});

angular.module('blah').controller('BlahCtrl', function($scope, BlahService) {
  $scope.someVar = 4;
  $scope.BlahService = new BlahService($scope);
});

angular.module('blah').controller('Blah2Ctrl', function($scope, BlahService) {
  $scope.someVar = 6;
  $scope.BlahService = new BlahService($scope);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="blah">
  <body>
    <div ng-controller="BlahCtrl">
      1a. <input ng-model="someVar">
      1b. <input ng-model="otherVar">
    </div>
<div ng-controller="Blah2Ctrl">
      2. <input ng-model="someVar">
  2b. <input ng-model="otherVar">
    </div>
  </body>
</html>

这个sn-p的关键特性是作用域是不同的作用域。它不像单例。

【问题讨论】：

标签： angularjs angularjs-scope angularjs-watch

【解决方案1】：

将 $scopes 传递给服务听起来像是内存泄漏的秘诀。如果没有别的，那就是很长的路要走。

而是考虑在每个指令中这样做：

scope.$watch('thing', function (thing) {
    coolService.doCoolStuffWith(thing);
}

让指令监视自己的作用域，并将共享功能放在服务中。

【讨论】：

我回答了我自己的问题，但如果我的回答让我感到悲伤，我会试试你的。谢谢你的回答。也许我把 DRY 走得太远了……我们拭目以待。

【解决方案2】：

这样做了，它允许我在手表内设置范围的其他成员：

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

angular.module('blah').factory('BlahService', function() {
  //constructor
  function BlahService(scope) {
    this._scope = scope;
    this.myFunc = function() {
      this._scope.otherVar = this._scope.someVar;
    };
    this._scope.$watch('someVar', function(newValue, oldValue, scope) {
      // do cool stuff with thing
      scope.otherVar = Number(scope.someVar) + 1;
      return newValue;
    });
  }
  return BlahService;
});

angular.module('blah').controller('BlahCtrl', function($scope, BlahService) {
  $scope.someVar = 4;
  $scope.BlahService = new BlahService($scope);
});

angular.module('blah').controller('Blah2Ctrl', function($scope, BlahService) {
  $scope.someVar = 6;
  $scope.BlahService = new BlahService($scope);
});

<html ng-app="blah">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <body>
    <div ng-controller="BlahCtrl">
      1a. <input ng-model="someVar">
      1b. <input ng-model="otherVar">
    </div>
<div ng-controller="Blah2Ctrl">
      2. <input ng-model="someVar">
  2b. <input ng-model="otherVar">
    </div>
  </body>
</html>

【讨论】：