O escopo em AngularJS tem uma estrutura muito hierárquica e bem aninhada. Todos eles têm um principal $ Rootscope (ou seja, a aplicação angular correspondente ou NG-App) e, em seguida, todas as outras partes do escopo são herdadas deste $ Rootscope, ou são aninhadas sob o escopo principal. Muitas vezes, você descobrirá que esses escopos não compartilham variáveis ou herdam nada de outro protótipo.
Então, neste caso, como você se comunica entre escopos? Uma opção é criar um serviço de singleton no escopo do aplicativo e, em seguida, lidar com as comunicações para todas as subescópias através deste serviço.
Há outra opção no AngularJS: lidar com as comunicações por meio de eventos no escopo. Mas essa abordagem tem algumas limitações; Por exemplo, você não pode espalhar amplamente eventos para o escopo de todo o monitoramento. Você deve escolher se deve se comunicar com o escopo dos pais ou o escopo da criança.
$ on, $ emit e $ transmitido simplificam a transferência de eventos e dados entre os controladores.
Exemplos são os seguintes
Código HTML
<Div ng-CONTROLLER = "parentCtrl"> <!-Parent-> <div ng-antroller = "selfctrl"> <!-self-> <a ng-click = "click ()"> clique em mim </a> <div ng-controller = "Childctrl"> </div> <!-Christed->. <!-pai-> </div>
Código JS
App.Controller ('selfCtrl', function ($ scope) {$ scope.click = function () {$ scope. $ Broadcast ('to-child', 'Child'); $ scope. $ emit ('to-par-parent', 'parent');}}); App.Controller ('parerctrllo', functllo ');}}); função (evento, dados) {console.log ('parentCtrl', dados); $ SCOPE. $ ON ('TO-CHILL', FUNÇÃO (Evento, Data) {Console.log ('ChildCtrl', Data); // A criança pode obter o valor}); função ($ scope) {$ scope. $ on ('to-parent', function (evento, dados) {console.log ('broctrl', dados); // o valor não é obtido pelo nível});Resultado final
ParentCtrl Parent
Criança Childctrl
$ emit e $ transmitido podem passar vários parâmetros e $ on também pode receber vários parâmetros.
O parâmetro de evento do evento no método $ on, suas propriedades e métodos de objeto são os seguintes
| Propriedades do evento | Propósito |
|---|---|
| Event.TargetScope | Escopo de emitir ou propagar o evento original |
| Event.CurrentsCope | Escopo de eventos atualmente sendo processados |
| Event.name | Nome do evento |
| event.stopPropagation () | Uma função que impede que os eventos se propagem ainda mais (borbulhando/captura) (isso funciona apenas para eventos emitidos com `$ emit`) |
| Event.PreventDefault () | Esse método não faz nada, mas definirá `DefaultPrevented` como TRUE. Ele não verifica o valor de `DefaultPrevented` até que o implementador do ouvinte do evento tome medidas. |
| Event.DefaultPrentEd | Verdadeiro se `prevenDDefault` for chamado |
Parece muito mais conveniente do que a comunicação de serviço em diferentes controladores ~~
O exposto acima é uma compilação de informações sobre o AngularJS $ on, $ emit e $ transmitido. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!