Passando métodos dinâmicos para diretiva personalizada em angular

Question

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.

Answer 1

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

1. usar $parse serviço para analisar expressão (dynamicMethods.myMethod(msg))
2. "ligar" (através fechamento javascript) $scope da função retornada da etapa 1 para o escopo original (escopo do controlador no seu caso)
3. 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.