从 Angular.js 中的指令控制器调用工厂答案

【问题标题】：Calling factory from directives controller in Angular.js从 Angular.js 中的指令控制器调用工厂
【发布时间】：2014-06-30 12:17:54
【问题描述】：

我正在尝试学习 Angular.js，我正在使用 ng-boiler-plate 来管理我的测试应用程序。

但是我遇到了一个问题，看不出它不起作用的原因。基本上我正在尝试注入一个工厂，然后从指令控制器中调用它。

但是，当我尝试调用它时，我收到一个错误，报告工厂名称（在本例中为 dashboardFac）未定义。

我将在下面包含指令和工厂：

指令：

angular.module( 'locationSelector', [
'ngBoilerplate.locationFactory'
] )

.directive( 'locationSelector', function() {
return {
    restrict: 'A',
    //template: '<h3>asdfasdfasd</h3>',
    templateUrl : 'components/locationSelector/locationSelector.tpl.html',
    link: function( scope, element, attrs ) {

        console.log("link working ");

        var $input = angular.element( document.querySelector( '#location' ) );

        $input.bind('focus', function() {
            console.log("stay focused son");
        });

    },
    controller: function($scope, dashboardFac, $element){
        $scope.locyTexy = "";
        $scope.api = dashboardFac;
        console.log($scope.api);
        $scope.change = function() {
            console.log("asdfasd");
            dashboardFac.assets.getLocations().then(function(result){  

            });
        };

    }
    };
})

;

工厂：

angular.module( 'ngBoilerplate.locationFactory', [

  ]).factory('dashboardFac', function($http, $q){
    this.assets = {
      getLocations: function(args) {
      var deferred = $q.defer();
      var parmUrl = "will be some url eventually";
      $http.jsonp({
          method: 'GET',
          url: parmUrl
      }).
      success(function(data, status) {
         deferred.resolve(data);
       }).
       error(function(data, status) {
         deferred.reject(data);
       });

      return deferred.promise;
    }
  };
});

任何帮助将不胜感激，我觉得我缺少一些基本的东西，但希望有人能帮助我指出正确的方向。

提前致谢。

【问题讨论】：

工厂必须返回一个对象
这是工厂和服务之间的区别吗？因为我以类似的方式设置了一个正常运行的服务？
您好，这解决了我的问题，您应该标记为答案，以便我接受。

标签： javascript angularjs angularjs-directive factory

【解决方案1】：

您必须将dashboardFac factory 注入指令：

.directive( 'locationSelector', function(dashboardFac) {
[…]
})

【讨论】：

【解决方案2】：

正如 Krzysztof Safjanowski 指出的那样，您必须首先将 factory 注入您的 directive

   .directive( 'locationSelector', function(dashboardFac) {
      […]
    })

那么你的工厂将不得不返回一个对象，就像所有其他工厂一样：

angular.module( 'ngBoilerplate.locationFactory', [])
  .factory('dashboardFac', function($http, $q){
    return {
      assets: {
        getLocations: function (args) {
          var deferred = $q.defer();
          var parmUrl = "will be some url eventually";
          $http.jsonp({
            method: 'GET',
            url: parmUrl
          }).
            success(function (data, status) {
              deferred.resolve(data);
            }).
            error(function (data, status) {
              deferred.reject(data);
            });

          return deferred.promise;
        }
      }
    }
});

【讨论】：