javascript - change - select multiple angular js
Dependencias opcionales en AngularJS (5)
Aparentemente no usa inyección automática. Sin embargo, puede inyectar el inyector y verificar el servicio:
myApp.controller(''MyController'', [
''$scope'', ''$injector'', ''firstRequiredService'', ''secondRequiredService'',
function ($scope, $injector, firstRequiredService, secondRequiredService) {
if ($injector.has(''firstOptionalService'')) {
var firstOptionalService = $injector.get(''firstOptionalService'');
}
}
]);
Estoy tratando de implementar un controlador en AngularJS que se usa en varias páginas. Hace uso de algunos servicios. Algunos de ellos están cargados en todas las páginas, otros no. Quiero decir que está definido en diferentes archivos, y estos archivos se cargan de forma independiente. Pero si no cargo estos servicios en todas las páginas, recibí un error:
Error: Unknown provider: firstOtionalServiceProvider <- firstOtionalService
Entonces, necesito cargar scripts en todas las páginas. ¿Puedo declarar la dependencia como opcional en Angular? P.ej:
myApp.controller(''MyController'', [''$scope'', ''firstRequiredService'', ''secondRequiredService'', ''optional:firstOptionalService'', ''optional:secondOptionalService'', function($scope, firstRequiredService, secondRequiredService, firstOptionalService, secondOptionalSerivce){
// No need to check, as firstRequiredService must not be null
firstRequiredService.alwaysDefined();
// If the dependency is not resolved i want Angular to set null as argument and check
if (firstOptionalService) {
firstOptionalService.mayBeUndefinedSoCheckNull();
}
}]);
Así es como lo resolví:
var deps = [];
try {
//Check if optionalModule is available
angular.module(''app'').requires.push(''optionalModule'');
deps.push(''optionalModule'');
} catch(e){
console.log("Warn: module optionalModule not found. Maybe it''s normal");
}
angular.module(''app'', deps).factory(''stuff'', function($injector) {
var optionalService;
if($injector.has(''optionalService'')) {
optionalService = $injector.get(''optionalService'');
} else {
console.log(''No waffles for you, dear sir'');
}
});
Intenta de esta manera ...
try {
angular.module(''YourModule'').requires.push(''Optional dependency module'');
} catch(e) {
console.log(e)
}
''requiere'' es una matriz de módulos de dependencia.
No, Angular aún no admite dependencias opcionales de fábrica. Es mejor que ponga todas sus dependencias en un módulo y lo cargue como un archivo Javascript. Si necesita otro conjunto de dependencias, considere crear otro módulo en otro JS y poner todas las dependencias comunes en el JS común.
Sin embargo, el comportamiento que ha descrito se puede lograr con el servicio $injector . Simplemente inyecte $injector lugar de todas sus dependencias a un controlador y extraiga las dependencias manualmente, verificando si existen. Eso es:
index.html:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
<script src="1.js"></script>
<script src="2.js"></script>
<title>1</title>
</head>
<body data-ng-controller="DemoController">
</body>
</html>
app.js:
var myApp = angular.module(''myApp'', []);
myApp.service(''commonService'', function(){
this.action = function(){
console.log(''Common service is loaded'');
}
});
myApp.controller(''DemoController'', [''$scope'', ''$injector'', function($scope, $injector){
var common;
var first;
var second;
try{
common = $injector.get(''commonService'');
console.log(''Injector has common service!'');
}catch(e){
console.log(''Injector does not have common service!'');
}
try{
first = $injector.get(''firstService'');
console.log(''Injector has first service!'');
}catch(e){
console.log(''Injector does not have first service!'');
}
try{
second = $injector.get(''secondService'');
console.log(''Injector has second service!'');
}catch(e){
console.log(''Injector does not have second service!'');
}
if(common){
common.action();
}
if(first){
first.action();
}
if(second){
second.action();
}
}]);
1.js:
myApp.service(''firstService'', function(){
this.action = function(){
console.log(''First service is loaded'');
}
});
2.js:
myApp.service(''secondService'', function(){
this.action = function(){
console.log(''Second service is loaded'');
}
});
Véalo en vivo en este plunk ! Intenta jugar con las etiquetas <script> y observa la salida de la consola.
PS Y, como dijo @Problematic, puede usar $injector.has() , comenzando desde AngularJS 1.1.5.
Probablemente vaya con la sugerencia de @ Proplematic de usar $ injector. Sin embargo, hay otra solución en la que puedo pensar: registrar todos los servicios con sus valores predeterminados ( null por ejemplo) en su archivo bootstrap. Cuando se cargan archivos adicionales, las definiciones posteriores anularán las definiciones predeterminadas, creando de alguna manera el efecto que desee.
var app = angular.module(''plunker'', []);
app.value("service1", null)
.value("service2", null)
.factory("service1", function() { return "hello"; });
app.controller(''MainCtrl'', function($scope, service1, service2) {
console.log(service1); // hello
console.log(service2); // null
});