你能重用 $scope.$watch

Question

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

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

而不是copy/paste，我想把它放在一个服务中，并使用来自两个控制器的服务，如下所示：

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>

此代码段的主要特点是作用域是不同的作用域。它不像一个单例。

Answer 1

将 $scopes 传递给服务听起来像是内存泄漏的秘诀。如果不出意外，那就是路途遥远。

而是考虑在每个指令中只执行此操作：

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

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

Answer 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>

你能重用 $scope.$watch

Can you reuse $scope.$watch

angularjs

angularjs-scope

angularjs-watch