javascript - AngularJS 指令是否使用输出参数？

Question

在下面的例子中，是“ccSpinner”参数和输出参数？他们到底是什么？如果不是，名称是如何传入但又在函数上复制的？我整个星期都在学习 AngularJS 和 JavaScript 教程，但没有任何内容解释这部分？

angular
    .module('app.widgets')
    .directive('ccSpinner', ['$window', ccSpinner]);

function ccSpinner($window) {
    // snip
};

Answer 1

这里实际上发生了几件事。

全局范围

第一个 ccSpinner 在全局范围内可用 implicitly .如果您不将函数声明包装在 closure 中它将隐式地在全局范围内可用。
一个 JS 文件中的示例:

function globalAvailable() {
    console.log('this can be called anywhere');
}

一些其他的 JS 文件:

globalAvailable(); // logs the above

吊装

JavaScript 有 variable and function hoisting .

这实质上意味着您可以在函数出现在您的代码中之前使用它。基本上浏览器改变了这个:

hoistedFunction();

function hoistedFunction() {
   console.log('the above call still works');
}

到:

function hoistedFunction() {
   console.log('the above call still works');
}

hoistedFunction();

Angular 依赖注入(inject)

以上所有内容都会影响相关行:

directive('ccSpinner', ['$window', ccSpinner]);

这样做是创建一个新的 ccSpinner 指令，该指令可通过 AngularJS 框架使用。

然后:['$window', ccSpinner] 表示 ccSpinner 指令需要 $window 并设置 函数ccSpinner 作为 ccSpinner 指令的定义。

您可以将行更改为:

directive('awesomeSpinner', ['$window', ccSpinner]);

并在您使用现有 ccSpinner 指令的地方使用新的 awesomeSpinner 指令，它的工作方式相同。