Passando métodos dinâmicos para diretiva personalizada em angular
-
21-12-2019 - |
Pergunta
Estou criando uma diretiva personalizada onde preciso atribuir uma função dentro do objeto que será usada ao passar para minha diretiva.No entanto, se eu passar o método escrevendo diretamente o nome da função dentro do modelo, tudo funcionará bem.Mas se eu atribuir essa referência de método a uma das propriedades do meu objeto e então estiver usando isso em meu modelo para passá-lo para a diretiva, mas isso não está funcionando.
Você pode ver aqui - jsfiddle
Você pode ver no console.Clique no botão Salvar, ele chamará a função salvar dentro da diretiva, mas a partir daí estou chamando o método do controlador que não está funcionando.Mas se você escrever o nome da função blabla
em vez de dynamicMethods.myMethod
então ele ligará, mas recebi um alerta interno indefinido.
Obrigado.
Solução
Você acertou quase.
O primeiro erro foi quando você definiu dynamicMethods
objeto que você está referenciando $scope.blabla
que ainda não existia.
O segundo erro foi quando você está passando valores para o accept
chamada de função que você vinculou ao escopo pai, você precisa passá-la como:
$scope.accept({msg: "from dir"})
onde msg
é uma variável local chamada que pode ser usada no valor da expressão de accept
atributo em sua chamada de diretiva personalizada <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...
eu atualizei seu violino de acordo.
Quando você escreve accept: "&"
você está dizendo angular para
- usar
$parse
serviço para analisar expressão (dynamicMethods.myMethod(msg)
) - "ligar" (através fechamento javascript)
$scope
da função retornada da etapa 1 para o escopo original (escopo do controlador no seu caso) - armazene a função dentro
accept
propriedade do escopo local da sua diretiva.
Agora, se você inspecionar o conteúdo de $scope.accept
pouco antes de chamá-lo na diretiva, você verá algo semelhante a:
function (locals) {
return parentGet(parentScope, locals);
}
onde locals
é um objeto com variáveis locais usado quando alcançamos a avaliação da função retornada de $parse
.Como não há parâmetros nomeados em javascript e não queremos apontar de alguma forma que o valor da variável local msg
é "from dir", estamos passando-o como um objeto simples onde a chave indica o nome da variável {msg: "from dir"}
.
Angular examinará a expressão (uma string) para avaliar e descobrir que msg
está entre colchetes, portanto, parece um parâmetro, cujo valor pode ser encontrado em locals
objeto.
Quando chegar a hora de chamar a função real, angular irá converter locals
objeto para array regular - preservando a ordem dos parâmetros que ele lê da expressão e chama a função de maneira semelhante a:
var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);
Espero que isso ajude um pouco a entender o que está acontecendo.