1. O que é escopo?
O escopo (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.Scope) é um objeto que aponta para o modelo de aplicativo. É também o contexto de expressão da expressão (http://www.cnblogs.com/lclao/archive/2012/09/16/2687162.html). O escopo é colocado em uma hierarquia de estruturas DOM semelhantes às da aplicação. O escopo pode monitorar os eventos de expressão e propagação do relógio ($ relógio).
2. As características do escopo
3. Escopo como modelo de dados (escopo como modelo de dados)
O escopo é o link entre o controlador de aplicativos e a visualização. No estágio de vinculação de modelos (http://www.cnblogs.com/lclao/archive/2012/09/04/2669802.html), diretiva (http://ww.cnblogs.com/lclao/archive/209/099/099/099/099/099/09/277/209/097/217/26669802.html), settlml (http://ww.cnblogs.com/lclao/archive/209/099/099/099/09/099/09/209/209/2677/26669802.html), setslml (http://ww.cnblogs.Ml) escopo. O $ Watch permite que a diretiva conheça as alterações nos atributos; portanto, a diretiva renderiza o valor atualizado no DOM.
Tanto os controladores quanto as diretrizes têm referência ao escopo, mas não um para o outro. Esse arranjo separa o controlador da diretiva e DOM. Este é um local importante, porque isola o controlador da visão, melhorando bastante a história de teste dos aplicativos.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> data-model </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng-controller = "mycontroller"> seu nome: <input type = "text" ng-model = "userName"/> <butão ng-click = "Sayhello ()"> Bem-vindo </button> <hr/> {{{Greting}}} </div. type = "text/javascript"> </script> <script type = "text/javascript"> function myController ($ scope) {$ scope.username = "meu pequeno dada"; $ scope.sayhello = function () {$ scope.greeting = "hello ~" + $ scope.username + "!"; }; } </script> </body> </html>No exemplo acima, podemos notar que o MyController atribui o atributo de nome de usuário em escopo com "My Little Dada". Em seguida, o SCOPE notifica a entrada para a atribuição e o pré-preenchimento do valor do nome de usuário na entrada. Isso mostra como o controlador pode gravar dados no escopo.
Da mesma forma, o controlador pode anexar o comportamento ao escopo, assim como o método Sayhello que é acionado quando o usuário clica no botão "Welcome". O método Sayhello pode ler o atributo do nome de usuário ou criar um atributo de saudação. Isso mostra que, quando eles estão vinculados a um controle de entrada HTML, as propriedades no escopo são atualizadas automaticamente.
Logicamente, a exibição {{saudação}} envolve os dois pontos a seguir:
Escopo de pesquisa com o nó do modelo DOM que define a expressão {{saudação}}. Neste exemplo, esse escopo é o mesmo que o escopo passou para o MyController. (Discutiremos a hierarquia do escopo mais tarde)
A expressão de saudação é avaliada através do escopo recuperado anteriormente e o resultado é então usado como o valor do texto que envolve o elemento DOM.
Podemos pensar que o escopo e suas próprias propriedades podem ser usadas como dados para renderizar visualizações. O escopo é a única fonte de truta para todas as coisas relacionadas.
Do ponto de vista da testabilidade, a separação do controlador e da visualização está encantada, pois nos permite (focar no) comportamento de teste sem a interferência de renderizar detalhes.
ele ('deve dizer olá', function () {var scopemock = {}; var cntl = new MyController (scopemock); // afirma que o nome de usuário está preenchido por espera (ScopeMock.username) .ToEqual ('World'); // afirmamos que lemos o novo nome e o scerning. Espere (Scopemock.Greeting) .ToEqual ('Olá angular!');});4. Hierarquias de escopo (hierarquias de escopo)
Cada aplicação angular tem e apenas um escopo de raiz, mas pode ter vários escopos filhos.
Um aplicativo pode ter vários escopos filhos, porque algumas diretivas criarão novos escopos filhos (consulte a documentação da diretiva para ver quais diretrizes podem criar novos escopos, como o NG-REPEAT). Quando o novo escopo for criado, eles serão adicionados ao escopo dos pais como escopo infantil. Dessa maneira, uma estrutura de árvore semelhante à DOM que eles estão anexados é criada.
Quando o Angular avalia {{nome de usuário}}, primeiro analisa a propriedade do nome de usuário do escopo associado ao elemento atual. Se nenhuma propriedade correspondente for encontrada, ela pesquisará o escopo dos pais até atingir o escopo da raiz. No JavaScript, esse comportamento é chamado de "herança do protótipo", e o escopo da criança é tipicamente herdado de seus pais.
Este exemplo mostra o escopo (o que é) e a herança do protótipo de propriedades no aplicativo.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> scope-hierarchies </title> <style type = "text/css"> .ng-cloak {exibir: nenhum; } .ng-scope {borda: 1px trasteado vermelho; } </style></head><body><div ng-controller="MyController"> Manager: {{employee.name}} [{{department}}] <br/> Report: <ul> <li ng-repeat="employee in employee.reports"> {{employee.name}} [{{department}}] </li> </ul> <HR/> {{Greeting}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function mycontroller ($ scope) {$ scope.department = "a" a "ANOCTROLLER) {$ scope.department =" a "a" scope). $ scope.employee = {name: "meu pequeno dada", relatórios: [{name: "lclao"}, {name: "who^o^"}]}; } </script> </body> </html>Observe que o Angular coloca automaticamente a classe Ng-scope em elementos que aderem ao escopo. <estilo> é definido no exemplo acima, destacando o alcance do novo escopo através da linha pontilhada vermelha. Como o repetidor avalia a expressão {{funcionário.name}}, o escopo da criança é necessário, mas, dependendo do escopo a expressão é avaliada, diferentes escopos têm resultados diferentes. Da mesma forma, o valor de {{departamento}} é herdado do protótipo no escopo da raiz. Somente quando existe, o atributo de departamento pode ser definido.
5. Recuperando escopos do DOM (recupere o escopo do DOM)
O escopo é anexado ao DOM como o atributo de dados $ scope e pode ser usado para recuperação para fins de depuração. (É impossível recuperar o escopo dessa maneira no aplicativo.) A localização do escopo da raiz conectada ao DOM é definida pela localização da diretiva NG-APP. Normalmente, Ng-App é colocado no elemento <html>, mas também pode ser colocado em outros elementos, por exemplo, apenas uma parte da visão precisa ser controlada pelo angular.
Veja o escopo no depurador:
1. No navegador, clique com o botão direito do mouse no elemento em que você está interessado e selecione "Exibir elemento". Podemos ver que o depurador do navegador destaca os elementos que selecionamos.
2. Debugger nos permite acessar o elemento atualmente selecionado através da variável $ 0 no console.
3. Se você deseja ver o escopo associado, podemos entrar: Angular.Element ($ 0) .Scope () no console
6. Propagação de eventos de escopo (propagação de eventos de escopo)
O escopo pode propagar eventos de uma maneira semelhante aos eventos DOM. Events can be broadcast (http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope#$broadcast) to child scope or emit (http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope#$emit) to parent scope. (Se o escopo atual for ouvido, ele também será executado)
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> scope-event-propagation </title> <style type = "text/css"> .ng-cloak {exibir: nenhum; } </style> </ad Head> <body> <div ng-controller = "myController"> contagem de escopo da raiz: {{count}} <ul> <li ng-repeat = "i em [1]" ng-CONTROLLER = "myContoller"> <botão ng ("$" emit "emit (emit) 'myEvent) ng-click = "$ transmitido ('myEvent')"> $ transmissão ("myevent") </butut> <br/> contagem de escopo médio: {{count}} <ul> <li ng-repeat = "Item em [1,2]" ng-andloller = "myController"> lef count: count: {{{{{{{{{{{{) </ul> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function myController ($ scope) {$ scope.count = 0; $ scope. $ on ("myevent", function () {$ scope.count ++;}); } </script> </body> </html>7. Ciclo de vida do escopo (ciclo de vida do escopo)
No fluxo de eventos normais do navegador, quando o navegador receber o evento, ele executará um retorno de chamada JavaScript correspondente. Depois que a função de retorno de chamada for executada, o navegador redesenhará o DOM e retornará ao estado em que você continua aguardando o evento.
Quando o navegador chama o código JavaScript fora do ambiente de execução angular, isso significa que o Angular não conhece a mudança do modelo. Para lidar corretamente a modificação do modelo, este comando deve entrar no ambiente de execução angular, criando o método $ Aplicação. Somente quando o modelo muda no método $ APLIC será contado corretamente pelo Angular. Por exemplo, uma diretiva ouve um evento DOM, como o NG-Click, que deve avaliar a expressão no método $ Aplicar.
Depois de avaliar a expressão, o método $ APLP executa um $ DIGEST. No estágio $ Digest, o escopo verifica todas as expressões ouvidas pelo $ Watch e compara o valor atual com o valor antigo. A verificação suja é assíncrona. Isso significa que a declaração de atribuição (por exemplo, $ scope.username = "angular") não fará com que um $ relógio seja notificado, mas a notificação do $ watch será adiada para o estágio $ digery. Esse atraso é necessário porque combina várias atualizações de modelo em uma notificação de relógio $, o que garante que nenhum outro $ Watch esteja sendo executado durante o processo de notificação de $ Watch. Se um relógio $ altera o valor do modelo, forçará um aumento de um ciclo $ Digest.
1) Criação (Crie escopo)
O escopo da raiz é criado por $ injetor (http://code.angularjs.org/1.0.2/docs/api/auto.$injector) durante o processo de inicialização do aplicativo. Durante o processo de vinculação do modelo, algumas diretivas criarão um novo escopo infantil.
2) Registro de Observador (Watcyer Register)
Durante o processo de vinculação do modelo, a diretiva registra $ relógio no escopo. Esses relógios serão usados como o valor de propagar o modelo ao DOM.
3) Modelo de mutação (alterações do modelo)
Para que as alterações sejam detectadas corretamente, precisamos envolvê -las no escopo. $ Aplicar. (A API Angular fez isso implicitamente; portanto, ao fazer um trabalho síncrono no controlador ou trabalho assíncrono com $ HTTP ou $ Timeout, nenhuma chamada adicional de aplicação adicional é necessária).
4) Observação da mutação (monitoramento da mudança)
No final de $ Apply, o Angular executará um ciclo $ DIGEST no escopo da raiz, que se propagará a todos os escopos infantis. No ciclo $ Digest, todas as expressões ou funções registradas no $ watch serão verificadas para determinar se o modelo mudou. Se a alteração ocorrer, o ouvinte $ Watch correspondente será chamado.
5) Destruição do escopo (destruição do escopo)
Quando o escopo da criança não é mais necessário, é de responsabilidade do produtor de escopo da criança destruí -los através do escopo. $ Destruir () API. Isso interrompe a propagação de chamadas $ Digest no escopo da criança, para que a memória usada pelo modelo de escopo da criança possa ser reciclada pelo GC (coletor de lixo).
1. Escopos e diretrizes
Durante a fase de compilação, o compilador conta com a diretiva de correspondência do modelo DOM. As diretivas geralmente podem ser divididas em duas categorias:
Diretivas de observação, como a expressão de Dobule-Curly {{Expression}}, registre o ouvinte usando o método $ relógio. Sempre que a expressão (valor) muda, essas diretivas devem ser notificadas para atualizar a visualização.
A diretiva do ouvinte, como o NG-Click, registra um ouvinte no DOM. Quando o ouvinte do DOM, a diretiva executa a expressão relevante e atualiza a visualização usando o método $ Aplicação.
Quando um evento externo (como Ação do Usuário, Timer ou XHR) é ouvido, a expressão relevante deve ser aplicada ao escopo através do método $ Aplicar, para que todos os ouvintes possam ser atualizados corretamente.
2. Diretivas que criam escopos
Na maioria dos casos, a diretiva e o escopo estão influenciando mutuamente, mas nenhuma nova instância de escopo é criada. No entanto, algumas diretivas (como o controlador NG e o NG-REPEAT) criam um novo escopo, anexando um escopo filho ao elemento DOM correspondente. Vemos o escopo de qualquer elemento DOM usando angular.Element (adomelement) .Scope ().
3 controladores e escopos
Nos seguintes casos, o escopo e o controlador se influenciam:
4. Escopo $ RELOCAR Considerações de desempenho (Escopo $ RELÓGIO DE DESEMPENSÃO Considerações)
No Angular, é uma operação comum executar a verificação suja no escopo para detectar alterações nos atributos. Para fazer isso, isso exige que a função de verificação suja seja eficiente. Cuidado com o fato de as funções de verificação suja não executarem operações de acesso à DOM, porque o acesso DOM é ordens de magnitude mais lentamente do que acessar as propriedades do objeto JavaScript.
O exposto acima são as informações sobre o escopo do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!