A criação do controlador
O controlador AngularJS é usado em todos os lugares e a demonstração de código é relativamente simples de criar.
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "ExampleApp"> <head> <meta http-equiv = "content-type" content = "text/html; src = "angular.js"> < /script> <link href = "bootstrap-theme.css" rel = "stylesheet" /> <link href = "bootstrap.css" rel = "stylesheet" /> <Script>-angular.module. {$ scope.setInput = function (value) {console.log ("print:" + value);}}); </script> </head> <corpo ng-controller = "defaultCtrl"> <div> <h> count </h> <d> <input ng-model = ""/> ng-click = "SetInput (value)"> clique em </botão> </div> </body> </html>O controle é muito simples. Primeiro, adicionei o atributo NG-App ao HTML para indicar o escopo do módulo.
Adicionado controlador NG ao corpo para representar o escopo do controlador DefaultCtrl.
O comando ng-modelo na nota de entrada é vincular dados, ligação de dados bidirecional (MVVM).
$ SCOPE é o escopo embutido de AngularJS.
Este exemplo é apenas para imprimir o valor de entrada no console, conforme mostrado na figura:
Isso é tudo, é simples.
Múltiplos problemas de escopo do controlador
Agora vamos modificar o programa.
<Body> <div ng --Controller = "DefaultCtrl"> <h> count </h> <div> <entrada necessária Ng-Model = "Value"/> <Button ng-click = "SetInput (value)"> clique </botão> </div> </Div Ng-Controller = "Defultctrl"> /> <Button ng-click = "SetInput (value)"> Clique em </botão> </div> </body>
O restante do código permanece inalterado, apenas coloquei a propriedade NG Controller colocada no corpo nas duas divs. Reutilizei o controlador DefaultCtrl. Acho que se eu inserir o conteúdo na primeira tag de entrada e clico no botão do botão do segundo controlador, o resultado que você espera aparecerá?
O resultado é o mesmo que você pensa de você? Você pode ver que o resultado é indefinido. Em uma boa explicação, deve ser que o escopo deles seja diferente. Embora você reutilize o controlador unificado, o escopo é realmente diferente ao criá -lo.
A função de fábrica chamada retornará diferentes escopos.
Então, como acessar entre diferentes escopos? Em AngularJS, há um $ Rootscope para acesso ao escopo.
Aqui estão três funções a serem introduzidas.
$ on (nome, manipulador) registre uma função de manipulador de eventos que será chamada quando um evento específico for recebido pelo escopo atual.
$ emit (nome, args) envia um evento para o escopo dos pais atual até o escopo da raiz.
$ transmitido (nome, args) envia um evento para o subscópio no escopo atual, o parâmetro é o nome do evento e um objeto usado para fornecer dados adicionais ao evento.
Agora altere o seguinte código:
<SCRIPT> angular.module ("exampleApp", []). zip: value}); console.log ("print:" + $ scope.input);} $ scope.copy = function () {console.log ("copy:" + $ scope.input);};}); </script> <div ng-controller = "defaultctrl"> <H> count <h> <h> ng-click = "copy ()"> copy </butut> </div> </div>No código do segmento, adicionei várias funções e mudei as funções do segundo controlador ao mesmo tempo.
resultado:
Isso aconteceu.
Herança do controlador
<Cript> angular.module ("ExampleApp", []). {//$rootscope.$broadcast("UpDateValue ", {zip: value}); $ scope.input = value; console.log (" print: " + $ scope.input);} $ scope.copy = function () {console.log (" cópia: " + scope.input); {$ scope.copy = function () {console.log ("copy:" + $ scope.input);};}); </script> <corpo ng-controller = "defaultCtrl"> <div> <h> count </h> <d> <input ng-model = ""/> ng-click = "SetInput (value)"> clique em </botão> </div> <div> <div ng-controller = "simplectrl"> <h> count </h> <div> <input necessário ng-model = "value"/> button ng-click = "cópia ()"> cópia </button> </> </> </> </>Adicionei um controlador e, após uma observação cuidadosa do Simpletrl, descobri que o DefaultCtrl contém o Simpletrl, de modo que a função herda simples.
Resultados: Quando publiquei a entrada na primeira janela, a segunda também mudou e deve ser o mesmo valor.
$ SCOPE Problema de escopo, você deve entender seu escopo ao usar o controlador.