Question

我有一个主app模块，它没有自己的控制器。它只有一个服务，由几个方法组成。有2个独立的组件本身就是模块。它们被注入主模块中。基本上，我想在component1中获取一个事件，它将调用主app模块中的service方法，该方法返回调用component2中的方法。

我在component1控制器中传递了Service Name，但是当我调用它时，它会抛出未定义函数的错误。

我尝试在Component1模块中注入Service Dependency，但是它会抛出无法初始化component1模块的错误。

我也是组件概念的新手，我想我在实现中犯了一些基本错误。此外，如果有另一种更好的方法从其他组件调用一个独立组件的方法，那么，请告诉我。

主要模块：

(function () {
   "use strict";

   var app = angular.module('allocationMapsApp', ['availableTrucks','assignedJobs','ui.bootstrap']);

   //cart service
   app.factory("assignedJobsService", function() {

      var showAssignedJobs = function(truck) {
         console.log("I am in service");
      };

      return 1;
   });

})();

component1模块：

(function () {
   "use strict";

   var availableTrucks = angular.module('availableTrucks', ['ui.bootstrap']);

})();

component1代码：

(function () {
   "use strict";

   angular.
   module('availableTrucks').
   component('availableTrucks', {
      templateUrl: 'template.html',
      controller: function AvailableTrucksController($http,assignedJobsService) {
         var self = this;

         self.selectTruck = function(data) {

            assignedJobsService.showAssignedJobs(98);
         };
      }
   });
})();

组件2模块：

(function () {
   "use strict";

   var assignedJobs = angular.module('assignedJobs', ['ui.bootstrap']);

})();

组件2代码：

(function () {
   "use strict";

   angular.
   module('assignedJobs').
   component('assignedJobs', {
      templateUrl: 'template.html',
      controller: function AssignedJobsController($http) {
         var self = this;

         self.fetchAssignedJobs = function () {
            var url = 'index.php';

            $http.get(url).then(function(response) {
               console.log("Success");
               console.log(response);
            }, function(response) {
               console.log("Failed");
               console.log(response);
            });
         };
      }
   });
})();

Answer 1

为什么抛出未定义函数的错误。？

您没有返回assignedJobsService个实例。您返回没有1函数的文字showAssignedJobs。

返回assignedJobsService的实例。

app.factory("assignedJobsService", function() {
      var services = {}
      services.showAssignedJobs = function(truck) {
         console.log("I am in service");
      };

      return services ;
   })

Answer 2

尝试为组件指定不同的名称，与模块名称不同。

Answer 3

首先是第一件事。避免在模块中构建代码，如：

angular
  .module('app', [])
  .controller('controllerName', function() {})

最佳做法是创建单独的文件/功能来处理您的控制器，服务等，如：

function controllerName() {

}

angular
  .module('app', [])
  .controller('controllerName', controllerName);

第二件事。您正在将assignedJobsService注入控制器。你在哪里准确定义这个服务名称？这可能是您的服务未定义的原因。

第三，尝试保持模块和控制器等的名称不一样，以后处理它可能会很棘手。我建议在组件名称的末尾添加前缀作为componentNameComponent或moduleNameModule等。

最后一件事看看带有es5的angularjs的风格指南：

https://github.com/toddmotto/angular-styleguide/tree/angular-old-es5

或者如果你可以随意使用es6，我会建议你看看这个：

https://github.com/toddmotto/angular-styleguide

如何使用Angularjs 1.5从组件访问父服务功能？

3 个答案: