工厂注入指令无效

时间:2017-10-17 09:25:16

标签: javascript angular factory code-injection directive

Angular noob在这里。

我尝试将我的工厂(beerFactory)注入指令,但我无法从我的链接功能中访问它。

正如你在我的代码中看到的那样,我试图在链接函数内部登录后记录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
            };
}]);
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    // Set the module format to "commonjs":
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

请参阅https://docs.angularjs.org/guide/di - &gt;内联数组注释

  

使用此类注释时,请注意使注释数组与函数声明中的参数保持同步。