Angular 菜鸟在这里。
我正在尝试将我的工厂(啤酒工厂)注入指令中,但我无法从链接函数中访问它。
正如您在我的代码中看到的那样,一旦我进入链接函数,我就会尝试控制台记录 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
};
}]);
您还必须将其作为参数传递:
app.directive('starRating', ['beerFactory', function(beerFactory){
请参阅 https://docs.angularjs.org/guide/di -> 内联数组注释
使用这种类型的批注时,请注意使批注数组与函数声明中的参数保持同步。