Dependency mismatch¶
ID: js/angular/dependency-injection-mismatch
Kind: problem
Security severity:
Severity: warning
Precision: very-high
Tags:
- correctness
- maintainability
- frameworks/angularjs
Query suites:
- javascript-security-and-quality.qls
Click to see the query in the CodeQL repository
AngularJS has built-in support for dependency injection: directives can simply list the services they depend on and AngularJS will provide appropriate instances and pass them as arguments at runtime.
Developers have to ensure that the list of dependencies matches the parameter list of the directive’s factory function: if a dependency is missing, no service instance will be injected, and the corresponding parameter will default to undefined. If a dependency and its corresponding parameter have different names, this makes the code hard to follow, and may even indicate a bug.
Recommendation¶
Ensure that declared dependencies and parameters match up.
Example¶
The following example directive declares a single dependency on the $compile service, but its factory function has two parameters $compile and $http. Presumably the second parameter was introduced without adding a corresponding dependency, so the service will not be injected correctly.
angular.module('myapp')
.directive('mydirective', [ '$compile', function($compile, $http) {
// ...
}]);
To solve this problem, the $http service has to be listed as a dependency as well:
angular.module('myapp')
.directive('mydirective', [ '$compile', '$http', function($compile, $http) {
// ...
}]);
References¶
AngularJS Developer Guide: Dependency Injection.