考虑一下
AngularJS by Brad Green的这个片段.
var directives = angular.module('guthub.directives',[]);
directives.directive('butterbar',['$rootScope',function ($rootScope) {
return {
link: function (scope,element,attrs) {
element.addClass('hide');
$rootScope.$on('$routeChangeStart',function () {
element.removeClass('hide');
});
$rootScope.$on('$routeChangeSuccess',function () {
element.addClass('hide');
});
}
};
}]
);
directives.directive('focus',function () {
return {
link: function (scope,attrs) {
element[0].focus();
}
};
});
请注意,对于“butterbar”指令,他传入一个数组,其中第一项只是一个依赖名为“$rootScope”的字符串,第二项是一个函数.该函数声明了对$rootScope的依赖.为什么我们在这里重复一遍？特别是当它似乎可以这样做时：
directives.directive('butterbar',function ($rootScope) {
return {
link: function (scope,attrs) {
element.addClass('hide');
$rootScope.$on('$routeChangeStart',function () {
element.removeClass('hide');
});
$rootScope.$on('$routeChangeSuccess',function () {
element.addClass('hide');
});
}
};
});
我猜测依赖名称是一个字符串具有某种意义.任何人都可以告诉我为什么他们在整本书中这样做(而不仅仅是指令)？
解决方法
当缩小JavaScript时,参数的名称通常会更改为更短的内容,例如a.这会打破依赖注入.
如果你使用数组,Angular知道要注入什么以及注入它的位置.这适用于数组,因为数组的字符串元素不会被缩小修改.
在这个例子中：
app.controller('test',function( $scope,$someProvider ) {
});
缩小的代码可能看起来像这样：
app.controller('test',function(a,b){});
这将不再有效,因为Angular不知道要注射什么,而这样：
app.controller('test',['$scope','$someProvider',$someProvider) {
}]);
缩小的代码可能会像这样结束：
app.controller('test',b) {}]);
这仍然有效,因为Angular仍然知道要注入什么.请参阅Angular tutorial中关于缩小的注释.
通常我只是在准备生产时添加数组样式.