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

Question

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

然而，我遇到了一个难题，看不出它不工作的原因。基本上，我尝试注入一个Factory，然后从指令控制器调用它。

但是，当我尝试调用它时，我得到一个错误，报告工厂名称(在本例中为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;
    }
  };
}); 

任何帮助都将是非常令人欣慰的，我有一种感觉，我错过了一些基本的东西，但希望有人能帮助我指出正确的方向。

提前谢谢。

Answer 1

您必须将dashboardFac工厂注入指令：

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

Answer 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;
        }
      }
    }
});