6

考虑一下Brad Green的 AngularJS 的这个片段。

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, element, attrs) {
            element[0].focus();
        }
    };
});

请注意，对于“butterbar”指令，他传入了一个数组，其中第一项只是一个带有依赖项名称的字符串，"$rootScope"第二项是一个函数。该函数声明了对$rootScope. 为什么我们在这里重复自己？特别是当它似乎可以做到这一点时：

directives.directive('butterbar', 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');
            });
        }
    };
});

我猜测作为字符串的依赖名称具有某种意义。谁能告诉我为什么他们在整本书中都这样做（而不仅仅是为了指令）？

4

1 回答 1

13

当 JavaScript 被缩小时，参数的名称通常会更改为更短的名称，例如a. 这会破坏依赖注入。

如果你使用一个数组，Angular 就知道要注入什么以及在哪里注入它。这适用于数组，因为数组的字符串元素不会被缩小修改。

在这个例子中：

app.controller('test', function( $scope, $someProvider ) {
});

缩小的代码可能看起来像这样：

app.controller('test',function(a,b){});

这将不再起作用，因为 Angular 不知道要注入什么，而有了这个：

app.controller('test', ['$scope', '$someProvider', function( $scope, $someProvider) {
}]);

缩小后的代码可能会像这样结束：

app.controller('test',['$scope','$someProvider',function(a,b) {}]);

这仍然有效，因为 Angular 仍然知道要注入什么。请参阅Angular 教程中关于缩小的说明。

通常我只是在准备好生产时添加数组样式。

于 2013-10-24T17:46:41.637 回答