Escopo angular
Em aplicativos da Web criados com o Angular, o conceito de escopo está ao longo dele. Muitas instruções na visão angular criarão um escopo, como NG-App, Ng Controller, etc. Esse escopo é $scope (versão antes do angular1.2) injetamos ao escrever construtores do controlador. É um conceito no modelo de vista. Nosso modelo de dados está definido no escopo.
Poço de escopo angular
As pessoas que usaram o Angular devem passar por um processo, ou seja, quando eram iniciantes no início, acabaram de vir a ligação de dados bidirecional.
Scope Pit 1 em Angular
Não importa como ele começou a usá -lo diretamente, ele o amarraria de uma só vez. Após a ligação, se você tiver sorte (o velho pássaro que entende o princípio do escopo angular o ignora), a ligação bidirecional começará a funcionar conforme o esperado. Nesse momento, também sentimos que somos tão poderosos que podemos perceber "vinculação bidirecional" tão rapidamente, que é um novo recurso que não foi ouvido.
Então, por que o acima está dizendo que a ligação bidirecional funciona corretamente por causa da boa sorte? Porque quando os novatos começaram a aprender o Angular, eles acabaram de ler o tutorial e mudaram o código para atender às suas necessidades de negócios. Mesmo se houver alguns jogadores que possam aprender documentos oficiais no início, eles ainda são uma minoria. Portanto, a maioria dos amigos que acabou de aprender Angular realmente não entende os princípios, mas acham que já sabem como usá -los.
Depois de dizer tanto, vamos dar uma olhada na situação em que um novato começa a especificar um modelo de dados no escopo e ligá-lo em direções bidirecionais. Nesse caso, você encontrará a armadilha mencionada acima. Vamos dar uma olhada no código primeiro.
// html <div ng-controller = "OuterCtrl"> <span ng-bind = "a"> </span> <div ng --Controller = "inerctrl"> <span ng-bind = "a"> </span> <butt-click = "A = a+1"> OuterCtrl ($ SCOPE) {$ SCOPE.A = 1;} função inerctrl () {}O código acima é um exemplo extremamente simples de ligação bidirecional. Depois que a página for carregada, 1 será exibido na div e a div. Quando o botão de incremento for pressionado, você descobrirá que apenas o interno 1 se torna 2. O mesmo se aplica a continuar pressionando, apenas o número interno aumentará. Então, neste momento, os novatos geralmente entram em pânico. E a ligação de mão dupla mágica que foi acordada?
Scope Pit 2 em Angular
Nesse momento, o bebê estava um pouco emocional. Ele subiu stackoverflow e os documentos oficiais. Finalmente, ele descobriu que havia de fato uma solução, como escrever como os data.a do atributo.a de um objeto:
// html <div ng-controller = "outerctrl"> <span ng-bind = "data.a"> </span> <div ng --controller = "inerctrl"> <span ng-bind = "Data.a"> </span> button ng-click = "Data = Data.a+1" OuterCtrl ($ scope) {$ scope.data = {a: 1};} função inerctrl () {}Então eu descobri que poderia funcionar e os dois números foram incrementados. Eu era o rei da ligação de mão dupla ... e depois joguei de lado e continuei a aprender a próxima parte do tutorial sem me importar com os princípios específicos. Esta é realmente minha jornada mental quando aprendi Angular. Eu tinha muita vergonha de fazer o aplicativo e implantá -lo no ambiente de produção antes de me lembrar de estudar os princípios internos.
O poço sempre precisa ser preenchido
Eu disse muito bobagem e pisei no poço. Entrei no estágio de enchimento do poço, o que significa que esse poço pode ser resolvido pelos atributos escritos como objetos. De fato, depois de conhecer o princípio, é fácil entender. O escopo interno e externo do angular é herdado pela cadeia do protótipo com base no JavaScript, e apenas o método de herança da cadeia de protótipos é usado. Amigos com alguns princípios básicos de JavaScript devem ser capazes de reagir instantaneamente. O valor do tipo de referência no objeto de protótipo da subclasse e o valor do tipo de referência no objeto da instância pai são a mesma referência, e o valor do tipo básico substituirá o valor do tipo básico no objeto pai. Esta é realmente a razão pela qual a herança de combinação existe, porque apenas o uso da herança da cadeia de protótipos trará o problema de apelação, o que é um pouco de longo alcance.
Em suma, aqui podemos olhar para o primeiro exemplo da seguinte maneira:
função outerctrl () {this.a = 1;} função inerctrl () {} var outer = new OuterCtrl (); inerctrl.prototype = Outer; var iner = new innerctrl (); interna.a = interna. A + 1; Aqui, definimos o protótipo objeto do construtor do controlador interno como um objeto de escopo externo, para que o objeto de escopo interno gerado herde a propriedade A no objeto externo externo. Esta propriedade é um valor básico do tipo. Ao acessar a propriedade A do objeto interno, como o próprio objeto interno não possui esses atributos, ela procurará com o objeto de protótipo. Existe esse atributo no protótipo do objeto externo; portanto, o valor de retorno não é um problema, mas se atribuirmos valor à propriedade A do objeto de escopo interno, o problema surgirá. inner.a = inner.a + 1; Esta declaração prossegue o processo mencionado acima para encontrar o valor da propriedade A e, em seguida, atribui o valor retornado à propriedade A do objeto de escopo interno. Como a propriedade A não existe, uma propriedade de valor básica de A é criada, bloqueando a propriedade A no objeto de escopo externo externo, e este poço sai.
Portanto, se substituirmos o atributo de valor do tipo básico pelo atributo de valor do tipo de referência, o problema poderá ser resolvido, porque os atributos correspondentes dos dois objetos são o mesmo valor de tipo de referência referenciado e, não importa onde seja modificado, ele será refletido em todos os objetos que se referem a ele.
Resumir
O exposto acima é sobre as armadilhas que precisam receber atenção no Angular. Espero que o conteúdo deste artigo seja útil para que todos aprendam sobre o escopo do Angular.