2017-10-17 8 views
0

Angulaire noob ici.L'injection d'usine dans la directive ne fonctionne pas

J'essaye d'injecter mon usine (beerFactory) dans une directive, mais je suis incapable d'y accéder depuis ma fonction de lien.

Comme vous pouvez le voir dans mon code, j'essaie de consigner la console l'objet beerFactory une fois que je suis à l'intérieur de la fonction de lien.

L'usine fonctionne correctement, car je l'utilise depuis un autre contrôleur.

Aucune idée de ce que je fais mal

app.directive('starRating', ['beerFactory', function(){ 
 
    return { 
 
       restrict: 'EA', 
 
       scope: { 
 
        'value': '=value', 
 
        'max': '=max', 
 
        'hover': '=hover', 
 
        'isReadonly': '=isReadonly' 
 
       }, 
 
       link: function(scope, element, attrs, ctrl) { 
 
        
 
       console.log(beerFactory); 
 

 
         function renderValue() { 
 
          scope.renderAry = []; 
 
          for (var i = 0; i < scope.max; i++) { 
 
           if (i < scope.value) { 
 
            scope.renderAry.push({ 
 
             'fa fa-star fa-2x': true 
 
            }); 
 
           } else { 
 
            scope.renderAry.push({ 
 
             'fa fa-star-o fa-2x': true 
 
            }); 
 
           } 
 
          } 
 
         } 
 
        
 
         scope.setValue = function (index) { 
 
          if (!scope.isReadonly && scope.isReadonly !== undefined) { 
 
           scope.value = index + 1; 
 
          } 
 
         }; 
 
        
 
         scope.changeValue = function (index) { 
 
          if (scope.hover) { 
 
           scope.setValue(index); 
 
          } else { 
 
           // !scope.changeOnhover && scope.changeOnhover != undefined 
 
          } 
 
         }; 
 
        
 
         scope.$watch('value', function (newValue, oldValue) { 
 
          if (newValue) { 
 
           scope.updateRating(newValue); 
 
           renderValue(); 
 
          } 
 
         }); 
 
         scope.$watch('max', function (newValue, oldValue) { 
 
          if (newValue) { 
 
           renderValue(); 
 
          } 
 
         }); 
 
        
 
        }, 
 
       template: '<span ng-class="{isReadonly: isReadonly}">' + 
 
        '<i ng-class="renderObj" ' + 
 
        'ng-repeat="renderObj in renderAry" ' + 
 
        'ng-click="setValue($index)" ' + 
 
        'ng-mouseenter="changeValue($index, changeOnHover)" >' + 
 
        '</i>' + 
 
        '</span>', 
 
       replace: true 
 
      }; 
 
}]);

Répondre

0

Vous devez également passer comme argument:

app.directive('starRating', ['beerFactory', function(beerFactory){ 

Voir https://docs.angularjs.org/guide/di -> Inline Tableau Annotation

Lors de l'utilisation de ce type d'annotation, veillez à synchroniser le tableau d'annotations avec les paramètres de la déclaration de fonction.

+0

Merci l'homme, ça a marché –