6

私は角度のある初心者で、アプリケーションを構築しています。1 つのことは、サービスを定義する方法がいくつかあることです。このリンクから詳細を読むことができます 。サービスを定義する方法。

しかし、私は違うと思う1つの違いに気づきました:

ここから取得したこのサービスを参照してくださいhttp://jsfiddle.net/2by3X/5/

var app = angular.module('myApp', []);
app.service('test', function($timeout, $q) {
  var self = this;
  this.getSomething = function() {
    return self.getData().then(function(data) {
      return self.compactData(data);
    });
  };
  this.getData = function() {
    var deferred = $q.defer();

      $timeout(function() {
          deferred.resolve("foo");
      }, 2000);
    return deferred.promise;
  };
  this.compactData = function(data) {
    var deferred = $q.defer();

    console.log(data);

    $timeout(function() {
        deferred.resolve("bar");
    }, 2000);
    return deferred.promise;
  };
});

以下のように「factory」を使用してこのサービスを定義すると、ある関数がサービスの他の関数を呼び出すことができなくなります。

app.factory('test', function($timeout, $q) {
  return {
      getSomething : function() {
    return getData().then(function(data) {
      return compactData(data);
    });
  },

      getData : function() {
    var deferred = $q.defer();

      $timeout(function() {
          deferred.resolve("foo");
      }, 2000);
    return deferred.promise;
  },

      compactData : function(data) {
    var deferred = $q.defer();

    console.log(data);

    $timeout(function() {
        deferred.resolve("bar");
    }, 2000);
    return deferred.promise;
  },
 };
});

ブラウザコンソールでこれを取得します：

[08:41:13.701] "Error: getData is not defined
.getSomething@http://fiddle.jshell.net/_display/:47
Ctrl1@http://fiddle.jshell.net/_display/:75
invoke@http://code.angularjs.org/1.0.0/angular-1.0.0.js:2795
instantiate@http://code.angularjs.org/1.0.0/angular-1.0.0.js:2805

誰でもこれを説明できますか？ありがとう。

4

1 に答える 1

9

そこには2つの大きな問題があります:

  • ファクトリは、構文が正しくないオブジェクトを返します。
  • 変数のjavascriptスコープは機能しています

つまり、次のようなオブジェクトを返す必要があります{key: value, key: value}

値は関数にすることができます。しかし、あなたは戻ってきます{key = value, key = value}

最初の修正:

return { 
    getSomething : function() {...},
    getData : function... 
}

次に、関数を呼び出せないのは正常です。このjsfiddleを参照してください。私はすべてを嘲笑した。サービスから返された関数の 1 つを呼び出すことができます。ただし、getSomething から getData を呼び出そうとすると、「未定義」になります。

app.factory('testSO', function () {
return {
    getSomething: function () {
        console.log('return getsomething');
        getData();
    },

    getData: function () {
        console.log('return getData');
    }...

これは、ファクトリ関数のスコープ内ですべてを宣言し、 jsfiddle で参照を返すのと同じです。

app.factory('testSO', function () {
    var getSomething = function () {
        console.log('return getsomething');
    };
    ...
return {
    getSomething: getSomething,
    ...
}

jsfiddleの最終バージョンに示すように、ローカル関数を呼び出すことができるようになりました。

app.factory('testSO', function () {
    var getSomething = function () {
        console.log('return getsomething');
        getData();
    };
...

元のサービスには重要なものがあります: var self = this;. var that = this を使用する人もいます 。これは、ECMA のエラーの回避策です。元のコードの場合、「すべてを 1 つのオブジェクトにまとめる」ために使用されます。関数 (たまたま関数であるプロパティ) では、 self呼び出したい関数がどこにあるかを知るために参照が必要です。ここで自分で試してみてくださいhttp://jsfiddle.net/Z2MVt/7/

于 2013-07-03T13:59:31.403 に答える