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

Calling factory from directives controller in Angular.js

本文关键字:指令控制器 调用 工厂 Angular js      更新时间:2023-09-26

我正在尝试学习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;
    }
  };
}); 

任何帮助都会非常感激,我有一种感觉,我错过了一些基本的东西,但希望有人能帮助我指出正确的方向。

提前感谢。

必须将dashboardFac factory注入指令:

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

您必须首先将factory注入directive,正如Krzysztof Safjanowski所指出的

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

那么你的工厂将不得不返回一个Object,就像其他工厂一样:

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