AngularJS Provider返回{$ get:...}而不是其内容

时间:2015-04-14 01:18:57

标签: angularjs

我正在尝试定义和使用AngularJS提供程序(AngularJS v 1.3.15)。

module = angular.module('myapp', []);

// Define Provider
module.provider("Notes", function() {

  this.$get = function() {
    return {
      someData: "ABCD"
    };
  };

});

// Use Provider
module.config([
  'NotesProvider', function(NotesProvider) {
    console.log('Configuring:', NotesProvider);
    console.log NotesProvider.someData
  }
]);

以上的输出是:

Configuring: Object {$get: function}  //I expected this to return an object with someData as one of its members
undefined                             //I expected "ABCD" here

我发现的所有资源都显示了上述定义和使用提供者的方式,但我对如何使这项工作感到迷茫。

我做错了什么?

我尝试过各种各样的事情,但似乎没有任何作用。

2 个答案:

答案 0 :(得分:2)

设置角度提供程序,以便您可以在配置阶段配置它们并自定义应用程序运行时提供的内容。

因此,在配置步骤中,您可以将NotesProvider配置为以特定方式运行,然后在应用程序运行时使用Notes。

var module = angular.module('myapp', []);

// Define Provider
module.provider("Notes", function() {

  var someData = "ABCD";
  this.configureData = function(data){
    someData = data;
  };

  this.$get = function() {
    return {
      someData: someData
    };
  };
});

// Use Provider
module.config([
  'NotesProvider', function(NotesProvider) {
    NotesProvider.configureData("EFGI");
    console.log('Configuring:', NotesProvider);
    console.log(NotesProvider.someData); // undefined because someData is on Notes not the provider
  }
])
.run(['Notes', function(Notes){
  console.log('Notes: ', Notes);
}]);

这是一个样本Plunker:http://plnkr.co/edit/rdIRs6ShweYCV3FxFm3N?p=preview

答案 1 :(得分:1)

这不是提供者在Angular中的工作方式。看一下下面的例子,一切都应该清楚:

module.provider("Notes", function() {
  this.someData = "ABCD";

  this.$get = function() {
    return {
      someData: "1234"
    };
  };
});

module.config(function(NotesProvider) {
  console.log(NotesProvider.someData); // ABCD
});

module.controller('Ctrl', function(Notes) {
  console.log(Notes.someData); // 1234
});