Are output parameters used in AngularJS directives?
In the example below, the "ccSpinner" parameter and the output parameter? What the hell are they? If not, how is the name passed but then duplicated to the function? I've been going through AngularJS and JavaScript tutorials all week and nothing explained this part?
angular
.module('app.widgets')
.directive('ccSpinner', ['$window', ccSpinner]);
function ccSpinner($window) {
// snip
};
source to share
Several things are happening here.
Global scope
The first ccSpinner
is implicitly available in the global scope . If you don't complete your function declaration in a closure , it will be implicitly available globally.
Example in one JS file:
function globalAvailable() {
console.log('this can be called anywhere');
}
Some other JS files:
globalAvailable(); // logs the above
Lifting
JavaScript has a variable and a hoisting function .
This essentially means that you can use the function before it appears in your code. Basically the browser changes this:
hoistedFunction();
function hoistedFunction() {
console.log('the above call still works');
}
in
function hoistedFunction() {
console.log('the above call still works');
}
hoistedFunction();
Angular Dependency Injection
Everything that has been said applies to this line:
directive('ccSpinner', ['$window', ccSpinner]);
What this means is to create a new directive ccSpinner
available through the AngularJS framework.
Then this: ['$window', ccSpinner]
says the directive ccSpinner
requires $window
and sets function ccSpinner
as the definition for the directive ccSpinner
.
You can change the line to:
directive('awesomeSpinner', ['$window', ccSpinner]);
and use the new directive awesomeSpinner
wherever you use the existing directive ccSpinner
and it will work the same.
source to share