Escopo AngularJS (escopo)
O escopo é o vínculo entre HTML (View) e JavaScript (controlador).
O escopo é um objeto com métodos e propriedades disponíveis.
O escopo pode ser aplicado em visualizações e controladores.
Como usar o escopo
Quando você cria um controlador no AngularJS, você pode passar no objeto $ scope como um parâmetro:
Instância de AngularJS
As propriedades no controlador correspondem às propriedades na visualização:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> {{carname}} </div> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope) {$ scope.carname = "volvo";}); corresponde ao nome usado na visualização em {{}}. </p> </body> </htmlResultados em execução:
Volvo
Crie um nome de atributo "Carname" no controlador, que corresponde ao nome usado na visualização em {{}}.
Ao adicionar um objeto $ SCOPE ao controlador, o View (HTML) pode obter essas propriedades.
Na visualização, você não precisa adicionar o prefixo $ scope, basta adicionar o nome do atributo, como: {{Carname}}.
Visão geral do escopo
A composição do aplicativo AngularJS é a seguinte:
View (View), isto é, html.
Modelo, dados disponíveis na visualização atual.
O controlador, ou seja, a função JavaScript, pode adicionar ou modificar propriedades.
Escopo é o modelo.
O escopo é um objeto JavaScript com propriedades e métodos que podem ser usados nas visualizações e controladores.
Instância de AngularJS
Se você modificar a visualização, o modelo e o controlador também serão atualizados de acordo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-CONTROLLER = "myctrl"> <input ng-model = "name"> meu nome é {{name}} </div> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', função ($ scope '), <]); O valor na caixa de entrada, afetará o modelo e, é claro, também afetará o valor de atributo correspondente do controlador. </p> </body> </html>Resultados em execução:
Meu nome é John Doe
Quando você modifica o valor na caixa de entrada, ele afetará o modelo e, é claro, ele também afetará o valor de atributo correspondente do controlador.
Escopo de escopo
É muito importante conhecer o escopo que você está usando atualmente.
Nas duas instâncias acima, há apenas um escopo de escopo, por isso é relativamente simples de processar. No entanto, em grandes projetos, existem vários escopos no HTML DOM. No momento, você precisa saber qual escopo correspondente ao escopo que está usando.
Instância de AngularJS
Quando usamos a diretiva NG-REPEAT, cada duplicado acessa o objeto duplicado atual:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller="myCtrl"><ul> <li ng-repeat="x in names">{{x}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.names = ["Emil", "Tobias", "Linus"];}); </sCript> </body> </html>Resultados em execução:
Cada elemento <li> pode acessar o objeto duplicado atual, que corresponde a uma sequência e é representado pela variável x.
Escopo da raiz
Todos os aplicativos possuem um $ RootScope que pode ser usado em todos os elementos HTML contidos na diretiva NG-APP.
$ rootscope pode ser usado em todo o aplicativo. É a ponte do escopo em cada controlador. Os valores definidos com o RootScope podem ser usados em cada controlador.
Instância de AngularJS
Ao criar um controlador, passe $ Rootscope como um parâmetro e pode ser usado no aplicativo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "myctrl"> O sobrenome é {{lastName}} membros da família: <ul> <li ng-repeat = "x nomes"> {{x}} {{sounName}} </li> </ul> </liv> <cript> var app = angular.m}} []); App.Controller ('myctrl', função ($ scope, $ rootscope) {$ scope.names = ["emil", "tobias", "linus"]; $ rootscope.lastname = "refsnes";}); </p> </body> </html>Resultados em execução:
O sobrenome é um membro da família Refsnes:
Observe que o $ Rootscope está acessível dentro e fora do objeto Loop.