Diferencia entre $ scope y $ rootScope

90

¿Alguien puede explicar la diferencia entre $ scope y $ rootScope?

Yo creo que

$ alcance:

Podemos obtener las propiedades del modelo ng en un controlador particular de la página en particular usando this.

$ rootScope

Podemos obtener todas las propiedades del modelo ng en cualquier controlador desde cualquier página usando this.

¿Es esto correcto? ¿O algo más?

javascript angularjs Sergio Ivanuzzo
fuente
@CodeError! Lo que quieres decir, ese enlace no ayuda a mi pregunta, hay $ scope. $ Root, no $ rootScope
$ rootScope está en la parte superior de la jerarquía de todos los ámbitos en su aplicación angular.
Angad

Respuestas:

87

"$ rootScope" es un objeto principal de todos los objetos angulares "$ scope" creados en una página web.

ingrese la descripción de la imagen aquí

$ scope se crea con ng-controllermientras que $ rootscope se crea con ng-app.

ingrese la descripción de la imagen aquí

Aayushi Jain
fuente
67

La principal diferencia es la disponibilidad de la propiedad asignada con el objeto. Una propiedad asignada con $scopeno se puede usar fuera del controlador en el que está definida, mientras que una propiedad asignada con $rootScopepuede usarse en cualquier lugar.

Ejemplo: si en el ejemplo siguiente reemplaza $rootScopecon $scopela propiedad del departamento, no se completará desde el primer controlador en el segundo

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>
Expandir fragmento

Ali Sadiq
fuente
18

De acuerdo con la Guía de alcances del desarrollador de Angular :

Cada aplicación Angular tiene exactamente un alcance raíz, pero puede tener varios alcances secundarios. La aplicación puede tener varios ámbitos, porque algunas directivas crean nuevos ámbitos secundarios (consulte la documentación de la directiva para ver qué directivas crean nuevos ámbitos). Cuando se crean nuevos ámbitos, se agregan como elementos secundarios de su ámbito principal. Esto crea una estructura de árbol que es paralela al DOM donde están conectados.

Tanto los controladores como las directivas hacen referencia al alcance, pero no entre sí. Esta disposición aísla al controlador tanto de la directiva como del DOM. Este es un punto importante ya que hace que los controladores se vean agnósticos, lo que mejora enormemente la historia de prueba de las aplicaciones.

Gary Stafford
fuente
13

$rootScopeestá disponible globalmente, sin importar en qué controlador se encuentre, mientras $scopeque solo está disponible para el controlador actual y sus hijos.

Tom
fuente
3

De otra manera podemos ver esto; $rootScopees global mientras que $scopees local. Cuando Controllerse asigna a una página, una $scopevariable se puede utilizar aquí porque se une a este controlador. Pero cuando queremos compartir su valor con otros controladores o servicios, entonces $rootScopese está utilizando (** hay formas alternativas, podemos compartir valores, pero en este caso queremos usar $rootScope).

Su segunda pregunta sobre cómo define esas dos palabras es correcta.

Por último, un poco desviado, utilícelo $rootScopecon cuidado. De manera similar a la forma en que usa las variables globales, puede ser difícil depurar y puede cambiar accidentalmente la variable global en algún lugar dentro de un temporizador o algo que haga que su lectura sea incorrecta.

Roger
fuente
2

Le recomiendo que lea la documentación oficial en profundidad de Angular para los ámbitos. Empiece en la sección 'Jerarquías de ámbito':

https://docs.angularjs.org/guide/scope

Básicamente, $ rootScope y $ scope identifican partes específicas del DOM dentro de las cuales

  • Se realizan operaciones angulares
  • las variables declaradas como parte de $ rootScope o $ scope están disponibles

Todo lo que pertenezca a $ rootScope está disponible globalmente en su aplicación Angular, mientras que cualquier cosa que pertenezca a $ scope está disponible dentro de la parte del DOM a la que se aplica ese alcance.

$ RootScope se aplica al elemento DOM que es el elemento raíz de la aplicación Angular (de ahí el nombre $ rootScope). Cuando agrega la directiva ng-app a un elemento del DOM, este se convierte en el elemento raíz del DOM dentro del cual $ rootScope está disponible. En otras palabras, las propiedades, etc. de $ rootScope estarán disponibles en toda su aplicación Angular.

Un alcance $ angular (y todas sus variables y operaciones) está disponible para un subconjunto particular del DOM dentro de su aplicación. Específicamente, el alcance $ para cualquier controlador en particular está disponible para la parte del DOM a la que se ha aplicado ese controlador en particular (usando la directiva ng-controller). Sin embargo, tenga en cuenta que ciertas directivas, por ejemplo, ng-repeat, cuando se aplican dentro de una parte del DOM donde se ha aplicado el controlador, pueden crear ámbitos secundarios del ámbito principal, dentro del mismo controlador, un controlador no necesariamente contiene solo un ámbito.

Si observa el HTML generado cuando ejecuta su aplicación Angular, puede ver fácilmente qué elementos DOM 'contienen' un alcance, ya que Angular agrega la clase ng-scope en cualquier elemento al que se haya aplicado un alcance (incluido el elemento raíz de la aplicación, que tiene $ rootScope).

Por cierto, el signo '$' al comienzo de $ scope y $ rootScope es simplemente un identificador en Angular para cosas reservadas por Angular.

Tenga en cuenta que el uso de $ rootScope para compartir variables, etc. entre módulos y controladores no suele considerarse una práctica recomendada. Los desarrolladores de JavaScript hablan de evitar la 'contaminación' del alcance global compartiendo variables allí, ya que puede haber conflictos más adelante si se usa una variable del mismo nombre en otro lugar, sin que el desarrollador se dé cuenta de que ya está declarada en $ rootScope. La importancia de esto aumenta con el tamaño de la aplicación y el equipo que la desarrolla. Idealmente, $ rootScope solo contendrá constantes o variables estáticas, que deben ser consistentes en todo momento en toda la aplicación. Una mejor manera de compartir cosas entre módulos puede ser utilizar servicios y fábricas, ¡que es otro tema!

Chris Halcrow
fuente
2

Ambos son objetos de secuencia de comandos de Java y la diferencia se ilustra mediante el diagrama que se muestra a continuación.

ingrese la descripción de la imagen aquí

NTB: La
primera aplicación angular intenta encontrar la propiedad de cualquier modelo o función en $ scope, si no encuentra la propiedad en $ scope, busca en el ámbito principal en la jerarquía superior. Si la propiedad aún no se encuentra en la jerarquía superior, angular intenta resolver en $ rootscope.

Waqas Ahmed
fuente
1

Los nuevos estilos, como AngularJS Styleguide de John Papa , sugieren que no deberíamos usar $scopepara guardar las propiedades de la página actual. En su lugar, deberíamos usar el controllerAs with vmenfoque donde la vista se une al objeto controlador en sí. Luego use una variable de captura para esto cuando use la sintaxis controllerAs. Elija un nombre de variable coherente, como vm, que significa ViewModel.

Sin embargo, aún necesitará el $scopepor sus capacidades de observación.

Stan
fuente