Question

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

$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在那里工作，但现在我无法在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

2 个答案: