Pasar métodos dinámicos a una directiva personalizada en angular

Question

Estoy creando una directiva personalizada donde necesito asignar una función dentro del objeto que se usará al pasar a mi directiva.Sin embargo, si paso el método escribiendo directamente el nombre de la función dentro de la plantilla, funciona bien.Pero si asigno esa referencia de método a una de las propiedades de mi objeto y luego la uso en mi plantilla para pasarla a la directiva, pero eso no funciona.

Puedes ver aquí - jsfiddle

Puedes verlo en la consola.Haga clic en el botón Guardar, llamará a la función guardar dentro de la directiva pero desde allí llamo al método del controlador que no funciona.Pero si escribes el nombre de la función blabla en cambio dynamicMethods.myMethod entonces llamará, pero en eso tengo una alerta interna indefinida.

Gracias.

Answer 1

Lo tenías casi bien.

El primer error fue cuando definiste dynamicMethods objeto al que haces referencia $scope.blabla que aún no existía.

El segundo error fue cuando pasas valores al accept llamada de función que ha vinculado al alcance principal, debe pasarla como:

$scope.accept({msg: "from dir"})

dónde msg es una variable local nombrada que se puede utilizar en el valor de expresión de accept atributo en su llamada directiva personalizada <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...

he actualizado tu violín respectivamente.

Cuando escribes accept: "&" le estás diciendo angular a

1. usar $parse servicio para analizar la expresión (dynamicMethods.myMethod(msg))
2. "unir" (a través de cierre de javascript) $scope de la función devuelta desde el paso 1 al alcance original (alcance del controlador en su caso)
3. almacenar la función dentro accept propiedad de su directiva de alcance local.

Ahora, si inspeccionas el contenido de $scope.accept Justo antes de llamarlo en directiva, verás algo similar a:

function (locals) {
  return parentGet(parentScope, locals);
}

dónde locals es un objeto con variables locales que se utiliza cuando llegamos a la evaluación de la función devuelta por $parse.Dado que no hay parámetros con nombre en javascript y no queremos señalar de alguna manera que el valor de la variable local msg es "del directorio", lo pasamos como un objeto simple donde la clave indica el nombre de la variable {msg: "from dir"}.

Angular mirará la expresión (una cadena) para evaluar y encontrar que msg está entre paréntesis, por lo que parece un parámetro, cuyo valor se puede encontrar en locals objeto.

Cuando llegue el momento de llamar a la función real, angular convertirá locals objeto a matriz regular: preserva el orden de los parámetros que lee de la expresión y llama a la función de una manera similar a:

var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);

Espero que ayude un poco a comprender lo que está pasando.