AngularJS - pasar función a directiva

Tengo un ejemplo angularJS

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

Cuando haga clic en el botón Deseo, aparecerá el cuadro de alerta, pero no se mostrará nada.

¿Alguien puede ayudarme?

Para llamar a una función de controlador en el ámbito primario desde el interior de una directiva de ámbito aislado, utilice dash-separatednombres de atributos en el HTML como lo dijo el OP.

Además, si desea enviar un parámetro a su función, llame a la función pasando un objeto:

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

Tal vez me falta algo, pero aunque las otras soluciones sí llaman a la función de alcance principal, no hay capacidad para pasar argumentos desde el código de la directiva, esto se debe a que update-fnestá llamando updateFn()con parámetros fijos, por ejemplo {msg: "Hello World"}. Un ligero cambio permite que la directiva pase argumentos, lo que creo que es mucho más útil.

<test color1="color1" update-fn="updateFn"></test>

Tenga en cuenta que el HTML pasa una referencia de función, es decir, sin ()corchetes.

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

Entonces, en lo anterior, el HTML está llamando a la callUpdatefunción de ámbito local , que luego 'obtiene' el updateFn del ámbito primario y llama a la función devuelta con parámetros que la directiva puede generar.

http://jsfiddle.net/mygknek2/

En su etiqueta Html de la directiva 'prueba', el nombre del atributo de la función no debe ser camelCased, sino basado en guiones.

entonces, en lugar de:

<test color1="color1" updateFn="updateFn()"></test>

escribir:

<test color1="color1" update-fn="updateFn()"></test>

Esta es la forma angular de distinguir entre los atributos de la directiva (como la función update-fn) y las funciones.

¿Qué tal pasar la función del controlador con enlace bidireccional ? Luego puede usarlo en la directiva exactamente de la misma manera que en una plantilla normal (eliminé las partes irrelevantes por simplicidad):

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

Aterricé en esta pregunta, porque probé el método anterior, pero de alguna manera no funcionó. Ahora funciona a la perfección.

use guiones y minúsculas para el nombre del atributo (como dicen otras respuestas):

 <test color1="color1" update-fn="updateFn()"></test>

Y use "=" en lugar de "&" en el alcance de la directiva:

 scope: { updateFn: '='}

Luego puede usar updateFn como cualquier otra función:

 <button ng-click='updateFn()'>Click</button>

Ahí tienes!

Tuve que usar el enlace "=" en lugar de "&" porque eso no funcionaba. Comportamiento extraño.

@JorgeGRC Gracias por tu respuesta. Sin embargo, una cosa es que la parte "quizás" es muy importante. Si tiene parámetros, también debe incluirlos en su plantilla y asegurarse de especificar sus locales, por ejemplo updateFn({msg: "Directive Args"}.