Question

我不知道注入工厂是什么，但我遇到了最困难的时期。

我已经通过这个样本插件http://plnkr.co/edit/I6MJRx?p=preview模拟了我正在尝试做的事情，它创建了一个剑道徒步旅行者 - 它工作正常。

我在script.js中有一个onChange事件，它只是写入控制台。这也有效。

我的插件加载以下内容：

1）进入app模块，并创建主控制器myCtrl（script.js）

2）注入widgetLinkingFactory int myCtrl

3）将MyService注入widgetLinkingFactory

我在index.html中加载文件的顺序似乎非常重要。

同样，上面的插件并不是真正的应用。它演示了我如何注入工厂和服务。

我的实际代码让我感到悲伤。我很难将工厂/服务注入其他工厂。

例如，

在下面的function linking()内调试时，我既看不到'CalculatorService'也没看到'MyService'服务。但是，我可以看到'reportsContext'服务。

(function () {    
      
   // ******************************
   // Factory: 'widgetLinkingFactory'
   // ******************************
    'use strict';
    app.factory('widgetLinkingFactory', ['reportsContext', 'MyService', linking]);

    function linking(reportsContext, MyService) {
       
        var service = {
            linkCharts: linkCharts
        };
        return service;

        function linkCharts(parId, widgets, parentWidgetData) {         

	    // *** WHEN DEBUGGING HERE, ***
            // I CANNOT SEE 'CalculatorService' AND 'MyService' 
	    // HOWEVER I CAN SEE 'reportsContext' 
	    
            if (parentWidgetData.parentObj === undefined) {
                // user clicked on root node of grid/treelist
            }
            _.each(widgets, function (wid) {
                if (wid.dataModelOptions.linkedParentWidget) {
                    // REFRESH HERE...
                }
            });
        }        
    }
    
})();

reportsContext'服务的摘要：

(function () {
    'use strict';

    var app = angular.module('rage');

    app.service('reportsContext', ['$http', reportsContext]);

    function reportsContext($http) {

        this.encodeRageURL = function (sourceURL) {
            var encodedURL = sourceURL.replace(/ /g, "%20");
            encodedURL = encodedURL.replace(/</g, "%3C");
            encodedURL = encodedURL.replace(/>/g, "%3E");            
            return encodedURL;
        }

        // SAVE CHART DATA TO LOCAL CACHE
        this.saveChartCategoryAxisToLocalStorage = function (data) {
            window.localStorage.setItem("chartCategoryAxis", JSON.stringify(data));
        }

    }
})();

另一点是，在我的主directive代码中，我可以调用WidgetLinking工厂的$broadcast事件：注意我是如何传入范围widgetLinkingFactory的。$ on。这是一个问题吗？

// Called from my DataModel factory :
$rootScope.$broadcast('refreshLinkedWidgets', id, widgetLinkingFactory, dataModelOptions);

// Watcher setup in my directive code :
  scope.$on('refreshLinkedWidgets', function (event, parentWidgetId, widgetLinkingFactory, dataModelOptions) {
  widgetLinkingFactory.linkCharts(parentWidgetId, scope.widgets, dataModelOptions);
          });

我在这些注射中浪费了很多时间，这让我发疯了。

提前感谢您的协助。

的问候，鲍勃

Answer 1

我想您可能想要了解工厂/服务，但以下内容可行：

var app = angular.module('rage')
app.factory('hi', [function(){
  var service = {};
  service.sayHi = function(){return 'hi'}
  return service;
}];

app.factory('bye', [function(){
  var service = {};
  service.sayBye = function(){return 'bye'}
  return service;
}];

app.factory('combine', ['hi', 'bye', function(hi, bye){
  var service = {};
  service.sayHi = hi.sayHi;
  service.sayBye = bye.sayBye;
  return service;
}];

在控制器......

app.controller('test', ['combine', function(combine){
  console.log(combine.sayHi());
  console.log(combine.sayBye());
}];

Answer 2

因此，如果您创建了一个plunk或者我们可以分叉代码并测试修复的东西，那将是最有帮助的。看看你的服务似乎并没有回报任何东西。我通常使用＆＃34;工厂＆＃34;设置我的所有服务。方法如下图所示

 var app = angular.module('Bret.ApiM', ['ngRoute', 'angularFileUpload']);
app.factory('Bret.Api', ['$http', function ($http: ng.IHttpService) {
    var adminService = new Bret.Api($http);
    return adminService;
}]);

正如您所看到的，我给它命名并定义了它需要的服务，然后我创建了一个对象，这是我的服务并将其返回给其他人使用。上面的语法是TypeScript，它与Angular一起使用非常好，因为这是Angular团队使用的。

注入Angular工厂和服务的问题

2 个答案: