0

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

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

这个片段的关键特性是作用域是不同的作用域。它不像单例。

4

2 回答 2

0

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

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

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

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

于 2015-11-19T18:50:00.753 回答
0

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

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>

于 2015-11-19T19:50:54.980 回答