Diferença entre $ scope e $ rootScope

Question 1

Alguém pode explicar a diferença entre $ scope e $ rootScope?

eu acho que

$ scope:

Podemos obter propriedades do modelo ng em um controlador específico a partir de uma página específica usando isso.

$ rootScope

Podemos obter todas as propriedades do modelo ng em qualquer controlador de qualquer página usando isso.

Isso está correto? Ou qualquer outra coisa?

Question 2

"$ rootScope" é um objeto pai de todos os objetos angulares "$ scope" criados em uma página da web.

$ scope é criado com, ng-controllerenquanto $ rootscope é criado com ng-app.

Question 3

A principal diferença é a disponibilidade da propriedade atribuída com o objeto. Uma propriedade atribuída com $scopenão pode ser usada fora do controlador no qual está definida, enquanto uma propriedade atribuída com $rootScopepode ser usada em qualquer lugar.

Exemplo: Se, no exemplo abaixo, você substituir $rootScopecom $scopea propriedade departamento não será preenchida a partir do primeiro controlador na segunda

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 trecho

Question 4

De acordo com o Guia do desenvolvedor de escopos da Angular :

Cada aplicativo Angular tem exatamente um escopo raiz, mas pode ter vários escopos filho. O aplicativo pode ter vários escopos, porque algumas diretivas criam novos escopos filho (consulte a documentação da diretiva para ver quais diretivas criam novos escopos). Quando novos escopos são criados, eles são adicionados como filhos de seu escopo pai. Isso cria uma estrutura em árvore paralela ao DOM onde eles estão anexados.

Os controladores e as diretivas referem-se ao escopo, mas não um ao outro. Esse arranjo isola o controlador da diretiva e também do DOM. Este é um ponto importante, pois torna a visão dos controladores agnóstica, o que melhora muito a história de teste dos aplicativos.

Question 5

$rootScopeestá disponível globalmente, não importa em qual controlador você esteja, ao passo que $scopesó está disponível para o controlador atual e seus filhos.

Question 6

De outra forma, podemos olhar para isso; $rootScopeé global enquanto $scopeé local. Quando Controlleré atribuído a uma página, uma $scopevariável pode ser usada aqui porque se vincula a este controlador. Mas quando queremos compartilhar seu valor com outros controladores ou serviços, então $rootScopeestá sendo usado (** existem maneiras alternativas, podemos compartilhar valores, mas neste caso queremos usar $rootScope).

Sua segunda pergunta sobre como você define essas duas palavras está correta.

Por último, um pouco fora do caminho, use $rootScopecom cuidado. Semelhante à forma como você usa variáveis globais, pode ser difícil depurar e você pode alterar acidentalmente a variável global em algum lugar dentro de um cronômetro ou algo que torne sua leitura incorreta.

Question 7

Cada aplicativo tem pelo menos um único rootScope e seu ciclo de vida é igual ao do aplicativo e cada controlador pode ter seu próprio escopo, que não é compartilhado com outros.

Dê uma olhada neste artigo:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Question 8

Recomendo que você leia a documentação oficial detalhada do Angular para escopos. Comece na seção 'Hierarquias de escopo':

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

Essencialmente, $ rootScope e $ scope identificam partes específicas do DOM dentro das quais

Operações angulares são realizadas
variáveis declaradas como parte de $ rootScope ou $ scope estão disponíveis

Qualquer coisa que pertença ao $ rootScope está disponível globalmente em seu aplicativo Angular, enquanto qualquer coisa que pertença a um $ escopo está disponível na parte do DOM à qual esse escopo se aplica.

O $ rootScope é aplicado ao elemento DOM que é o elemento raiz do aplicativo Angular (daí o nome $ rootScope). Quando você adiciona a diretiva ng-app a um elemento do DOM, ele se torna o elemento raiz do DOM dentro do qual $ rootScope está disponível. Em outras palavras, propriedades etc. de $ rootScope estarão disponíveis em todo o seu aplicativo Angular.

Um escopo $ Angular (e todas as suas variáveis e operações) está disponível para um subconjunto específico do DOM em seu aplicativo. Especificamente, o escopo $ para qualquer controlador específico está disponível para a parte do DOM ao qual esse controlador específico foi aplicado (usando a diretiva ng-controller). Observe, porém, que certas diretivas, por exemplo, ng-repeat, quando aplicadas dentro de uma parte do DOM onde o controlador foi aplicado, podem criar escopos filho do escopo principal - dentro do mesmo controlador - um controlador não contém necessariamente apenas um escopo.

Se você olhar o HTML gerado ao executar seu aplicativo Angular, poderá ver facilmente quais elementos DOM 'contêm' um escopo, pois o Angular adiciona a classe ng-scope em qualquer elemento ao qual um escopo foi aplicado (incluindo o elemento raiz do aplicativo, que tem o $ rootScope).

A propósito, o sinal '$' no início de $ scope e $ rootScope é simplesmente um identificador no Angular para coisas reservadas pelo Angular.

Observe que usar $ rootScope para compartilhar variáveis etc. entre módulos e controladores geralmente não é considerado a melhor prática. Os desenvolvedores de JavaScript falam sobre como evitar a 'poluição' do escopo global compartilhando variáveis lá, uma vez que pode haver conflitos mais tarde se uma variável com o mesmo nome for usada em outro lugar, sem que o desenvolvedor perceba que ela já está declarada no $ rootScope. A importância disso aumenta com o tamanho do aplicativo e com a equipe que o está desenvolvendo. O ideal é que $ rootScope conterá apenas constantes ou variáveis estáticas, que devem ser consistentes o tempo todo no aplicativo. Uma maneira melhor de compartilhar coisas entre os módulos pode ser usar serviços e fábricas, que é outro tópico!

Question 9

Ambos são objetos de script Java e a diferença é ilustrada pelo diagrama abaixo.

NTB:
Primeiro aplicativo angular tenta encontrar a propriedade de qualquer modelo ou função em $ scope, se não encontrar a propriedade em $ scope, então ele pesquisa no escopo pai na hierarquia superior. Se a propriedade ainda não for encontrada na hierarquia superior, angular tenta resolver em $ rootscope.

Question 10

Novos estilos, como o AngularJS Styleguide de John Papa , estão sugerindo que não deveríamos usar $scopepara salvar as propriedades da página atual. Em vez disso, devemos usar ocontrollerAs with vm abordagem em que a visualização se liga ao próprio objeto controlador. Em seguida, use uma variável de captura para isso ao usar a sintaxe controllerAs. Escolha um nome de variável consistente, como vm, que significa ViewModel.

Você ainda precisará do $scopepara seus recursos de visualização.

Answer 1

90

Alguém pode explicar a diferença entre $ scope e $ rootScope?

eu acho que

$ scope:

Podemos obter propriedades do modelo ng em um controlador específico a partir de uma página específica usando isso.

$ rootScope

Podemos obter todas as propriedades do modelo ng em qualquer controlador de qualquer página usando isso.

Isso está correto? Ou qualquer outra coisa?

javascript angularjs Sergio Ivanuzzo
fonte

@Erro de código ! O que você quer dizer, esse link não ajuda a minha pergunta, tem $ scope. $ Root, não é um $ rootScope

$ rootScope está no topo da hierarquia de todos os escopos em seu aplicativo angular.

Angad

Answer 2

@Erro de código ! O que você quer dizer, esse link não ajuda a minha pergunta, tem $ scope. $ Root, não é um $ rootScope

Answer 3

$ rootScope está no topo da hierarquia de todos os escopos em seu aplicativo angular.

Angad

Answer 4

"$ rootScope" é um objeto pai de todos os objetos angulares "$ scope" criados em uma página da web.

$ scope é criado com, ng-controllerenquanto $ rootscope é criado com ng-app.

Answer 5

A principal diferença é a disponibilidade da propriedade atribuída com o objeto. Uma propriedade atribuída com $scopenão pode ser usada fora do controlador no qual está definida, enquanto uma propriedade atribuída com $rootScopepode ser usada em qualquer lugar.

Exemplo: Se, no exemplo abaixo, você substituir $rootScopecom $scopea propriedade departamento não será preenchida a partir do primeiro controlador na segunda

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 trecho

Answer 6

De acordo com o Guia do desenvolvedor de escopos da Angular :

Cada aplicativo Angular tem exatamente um escopo raiz, mas pode ter vários escopos filho. O aplicativo pode ter vários escopos, porque algumas diretivas criam novos escopos filho (consulte a documentação da diretiva para ver quais diretivas criam novos escopos). Quando novos escopos são criados, eles são adicionados como filhos de seu escopo pai. Isso cria uma estrutura em árvore paralela ao DOM onde eles estão anexados.

Os controladores e as diretivas referem-se ao escopo, mas não um ao outro. Esse arranjo isola o controlador da diretiva e também do DOM. Este é um ponto importante, pois torna a visão dos controladores agnóstica, o que melhora muito a história de teste dos aplicativos.

Answer 7

13

$rootScopeestá disponível globalmente, não importa em qual controlador você esteja, ao passo que $scopesó está disponível para o controlador atual e seus filhos.

Tom
fonte

Answer 8

De outra forma, podemos olhar para isso; $rootScopeé global enquanto $scopeé local. Quando Controlleré atribuído a uma página, uma $scopevariável pode ser usada aqui porque se vincula a este controlador. Mas quando queremos compartilhar seu valor com outros controladores ou serviços, então $rootScopeestá sendo usado (** existem maneiras alternativas, podemos compartilhar valores, mas neste caso queremos usar $rootScope).

Sua segunda pergunta sobre como você define essas duas palavras está correta.

Por último, um pouco fora do caminho, use $rootScopecom cuidado. Semelhante à forma como você usa variáveis globais, pode ser difícil depurar e você pode alterar acidentalmente a variável global em algum lugar dentro de um cronômetro ou algo que torne sua leitura incorreta.

Answer 9

Cada aplicativo tem pelo menos um único rootScope e seu ciclo de vida é igual ao do aplicativo e cada controlador pode ter seu próprio escopo, que não é compartilhado com outros.

Dê uma olhada neste artigo:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 10

Recomendo que você leia a documentação oficial detalhada do Angular para escopos. Comece na seção 'Hierarquias de escopo':

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

Essencialmente, $ rootScope e $ scope identificam partes específicas do DOM dentro das quais

Operações angulares são realizadas
variáveis declaradas como parte de $ rootScope ou $ scope estão disponíveis

Qualquer coisa que pertença ao $ rootScope está disponível globalmente em seu aplicativo Angular, enquanto qualquer coisa que pertença a um $ escopo está disponível na parte do DOM à qual esse escopo se aplica.

O $ rootScope é aplicado ao elemento DOM que é o elemento raiz do aplicativo Angular (daí o nome $ rootScope). Quando você adiciona a diretiva ng-app a um elemento do DOM, ele se torna o elemento raiz do DOM dentro do qual $ rootScope está disponível. Em outras palavras, propriedades etc. de $ rootScope estarão disponíveis em todo o seu aplicativo Angular.

Um escopo $ Angular (e todas as suas variáveis e operações) está disponível para um subconjunto específico do DOM em seu aplicativo. Especificamente, o escopo $ para qualquer controlador específico está disponível para a parte do DOM ao qual esse controlador específico foi aplicado (usando a diretiva ng-controller). Observe, porém, que certas diretivas, por exemplo, ng-repeat, quando aplicadas dentro de uma parte do DOM onde o controlador foi aplicado, podem criar escopos filho do escopo principal - dentro do mesmo controlador - um controlador não contém necessariamente apenas um escopo.

Se você olhar o HTML gerado ao executar seu aplicativo Angular, poderá ver facilmente quais elementos DOM 'contêm' um escopo, pois o Angular adiciona a classe ng-scope em qualquer elemento ao qual um escopo foi aplicado (incluindo o elemento raiz do aplicativo, que tem o $ rootScope).

A propósito, o sinal '$' no início de $ scope e $ rootScope é simplesmente um identificador no Angular para coisas reservadas pelo Angular.

Observe que usar $ rootScope para compartilhar variáveis etc. entre módulos e controladores geralmente não é considerado a melhor prática. Os desenvolvedores de JavaScript falam sobre como evitar a 'poluição' do escopo global compartilhando variáveis lá, uma vez que pode haver conflitos mais tarde se uma variável com o mesmo nome for usada em outro lugar, sem que o desenvolvedor perceba que ela já está declarada no $ rootScope. A importância disso aumenta com o tamanho do aplicativo e com a equipe que o está desenvolvendo. O ideal é que $ rootScope conterá apenas constantes ou variáveis estáticas, que devem ser consistentes o tempo todo no aplicativo. Uma maneira melhor de compartilhar coisas entre os módulos pode ser usar serviços e fábricas, que é outro tópico!

Answer 11

Ambos são objetos de script Java e a diferença é ilustrada pelo diagrama abaixo.

NTB:
Primeiro aplicativo angular tenta encontrar a propriedade de qualquer modelo ou função em $ scope, se não encontrar a propriedade em $ scope, então ele pesquisa no escopo pai na hierarquia superior. Se a propriedade ainda não for encontrada na hierarquia superior, angular tenta resolver em $ rootscope.

Answer 12

Novos estilos, como o AngularJS Styleguide de John Papa , estão sugerindo que não deveríamos usar $scopepara salvar as propriedades da página atual. Em vez disso, devemos usar ocontrollerAs with vm abordagem em que a visualização se liga ao próprio objeto controlador. Em seguida, use uma variável de captura para isso ao usar a sintaxe controllerAs. Escolha um nome de variável consistente, como vm, que significa ViewModel.

Você ainda precisará do $scopepara seus recursos de visualização.

Diferença entre $ scope e $ rootScope

$ scope:

$ rootScope

Respostas: