工厂注入指令不起作用

Question

Angular 菜鸟在这里。

我正在尝试将我的工厂 (beerFactory) 注入一个指令，但我无法从我的 link 函数中访问它。

如您在我的代码中所见，一旦我进入 link 函数，我将尝试通过控制台记录 beerFactory 对象。

工厂工作正常，因为我是从另一个控制器内部使用它的。

不知道我做错了什么

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

Answer 1

您还必须将其作为参数传递：

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

参见https://docs.angularjs.org/guide/di -> 内联数组注释

When using this type of annotation, take care to keep the annotation array in sync with the parameters in the function declaration.

工厂注入指令不起作用

Factory injection into directive is not working

javascript

angular

factory

code-injection

directive