¡Esta es una revisión vieja del documento!


4.11 $rootScope

El $rootScope es el scope del que heredan el resto de los scopes que usamos en los controladores 1). Su utilidad es como variable global ya que nos permite añadir propiedades a él y que el resto de controladores tengan acceso.

Al ser como una variable global hay que usarlo con cuidado y en general si tenemos algún dato global es mejor usar un servicio para guardar dicho dato que usar el $rootScope.

Sin embargo el $rootScope tiene una ventana sobre un servicio. Usando un servicio nos obliga en todos los scope que necesitemos el tener que inyectarlo y guardarnos sus datos. Es decir que hay que repetir ese pequeño trozo de código en todos los controladores. Sin embargo , usando $rootScope mas un servicio podemos tener lo mejor de ambos mundos.

Veamos ahora un ejemplo esto.En este ejemplo vamos a suponer que todos los controladores necesitan de la propiedad appName con el nombre de la aplicación para poder mostrarla en la página.

El códigi JavaScript de los controladores quedaría así:


app.controller("ControllerA",["$scope",function($scope) {
  $scope.appName="Gestión de seguros médicos"
}]);

app.controller("ControllerB",["$scope",function($scope) {
  $scope.appName="Gestión de seguros médicos"
}]);

Vemos como tenemos 2 controladores (“ControllerA” y “ControllerB”), en ambos casos definimos la misma propiedad en el $scope llamada appName. Nos podríamos ahorrar las 2 líneas (o muchas mas si hubiera mas controladores) usando $rootScope y definiendo la propiedad appName en él.

Para definir una única vez la propiedad y fuera los controladores se usan un bloque run.

app.run(['$rootScope',function($rootScope) {
  $rootScope.appName="Gestión de seguros médicos";
}]);

app.controller("ControllerA",["$scope",function($scope) {

}]);

app.controller("ControllerB",["$scope",function($scope) {

}]);

  • Línea 1: Creamos el bloque run.
  • Línea 2: Definimos la propiedad appName.
  • Línea 6 y 10: Estas líneas están vacías ya que no hace falta definir la propiedad appName en cada controlador.

Servicio

Pero como ya hemos dicho está un poco mal tener valor que sean constantes directamente en bloques run o bloques config. Así que vamos a crear un value para guardar el valor.

app.value("appName",""Gestión de seguros médicos"");

app.run(['$rootScope','appName',function($rootScope,appName) {
  $rootScope.appName=appName;
}]);

app.controller("ControllerA",["$scope",function($scope) {

}]);

app.controller("ControllerB",["$scope",function($scope) {

}]);

  • Linea 1: Definimos el servicio de tipo value con el valor de appName.
  • Línea 3: Inyectamos el valor del servicio appName en el bloque run.
  • Línea 4: Asignamos al valor del servicio a la propiedad appName.

Este último cambio parece un poco tonto ya que hemos movido el valor del bloque run al value. Realmente es necesario ya que de esa forma podremos usar el valor de appName'' en otros sitios además del bloque run.

1) Realmente hay mas sitios donde se usan scopes
unidades/04_masdirectivas/11_rootscope.1407223001.txt.gz · Última modificación: 2014/08/05 09:16 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0