Entrar Ainda não tem acesso?
3
respostas

Scope watch

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Componentizar ainda é o melhor investimento: precisamos saber mais sobre diretivas! e atividade Watchman :)

por ISRAEL MARINHO BISPO
| 43k xp | 26 posts
Coordenador de Sistemas

Prezados, Executando o exemplo do curso, eu tenho o seguinte código:

pagina.html

<input ng-model="foto.url" name="url" class="form-control" required foco-bispo focado="focado">

diretiva.js

.directive( 'focoBispo', function() {
        var ddo = {};
        ddo.restrict = "A";
        ddo.scope = {
            focado : '='
        };
        ddo.link = function( escopo, elemento ) {
            escopo.$watch('focado', function(newValue, oldValue) {
                console.log( `Element: ${elemento[0].name} New: ${newValue} Old: ${oldValue}` );
            });
        };
        return ddo;
    });

No console aparece:

Element: url
New: undefined
Old: undefined

Dúvida: Porque os parâmetros 'newValue' e 'oldValue' aparecem como undefined, sendo que na aula diz que eles vêm com valores?

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Bispo, tudo bem? Faz muito tempo que não mexo com AngularJS, mas, tente adicionar um terceiro parâmetro para sua função com o valor true:

ddo.link = function( escopo, elemento ) {
    escopo.$watch('focado', function(newValue, oldValue) {
        console.log( `Element: ${elemento[0].name} New: ${newValue} Old: ${oldValue}` );
    }, true);
};

Talvez possa resolver.

Espero ter ajudado.

por ISRAEL MARINHO BISPO
| 43k xp | 26 posts
Coordenador de Sistemas

Olá Matheus, beleza?

Muito obrigado pelo seu feedback às minhas questões :-)

Infelizmente não funcionou. Acrescentei o 3º parâmetro true na function $watch(), conforme sua sugestão:

  ddo.link = function( escopo, elemento, atributos ) {
            escopo.$watch('focado', function(newValue, oldValue) {
                console.log(atributos);
                console.log( `Element: ${elemento[0].name} New: ${newValue} Old: ${oldValue}` );
            }, true);

Acrescentei também o parâmetro atributos na link.function() e vi no console o resultado, baseado na thread encontrada na internet.

minha-diretiva.js:167 Yb {$attr: {…}, $$element: T(1), ngModel: "foto.url", name: "url", class: "form-control", …}$$element: T [input.form-control.ng-isolate-scope.ng-dirty.ng-touched.ng-invalid.ng-invalid-required]$$observers: {name: Array(1), required: Array(1)}$attr: {ngModel: "ng-model", name: "name", class: "class", required: "required", focoBispo: "foco-bispo", …}class: "form-control"focado: "focado"focoBispo: ""name: "url"ngModel: "foto.url"required: true__proto__: Object
minha-diretiva.js:169 Atributos: [object Object]

Neste parâmetro também não encontrei nada que pudesse me mostrar o oldValue e newValue.

Abraços,

Bispo.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Bispo, consegue compartilhar o projeto comigo? Pode ser via Github ou Google Drive (zipado).

Assim eu consigo subir ele aqui e testar na minha máquina, fica mais fácil para simular e entender o problema.

Fico no aguardo.