0

コピー/貼り付けして2つのコントローラーで使用したいコードを見つけました。それは何かを見ています。

$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 に答える