AngularJS - passa a função para diretiva

Eu tenho um exemplo 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>

Desejo que, quando clicar no botão, a caixa de alerta será exibida, mas nada será exibido.

Alguém pode me ajudar?

Para chamar uma função de controlador no escopo pai de dentro de uma diretiva de escopo isolado, use dash-separatednomes de atributos no HTML, como o OP disse.

Além disso, se você deseja enviar um parâmetro para sua função, chame a função passando um 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

Talvez esteja faltando alguma coisa, mas, embora as outras soluções chamem a função de escopo pai, não há capacidade de passar argumentos do código de diretiva, isso ocorre porque a update-fnchamada é feita updateFn()com parâmetros fixos, por exemplo {msg: "Hello World"}. Uma pequena mudança permite que a diretiva passe argumentos, o que eu consideraria muito mais útil.

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

Observe que o HTML está passando uma referência de função, ou seja, sem ()colchetes.

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");
          }
        }
    }
});

Portanto, acima, o HTML está chamando a callUpdatefunção de escopo local , que 'busca' o updateFn do escopo pai e chama a função retornada com parâmetros que a diretiva pode gerar.

http://jsfiddle.net/mygknek2/

Na tag Html da diretiva 'test', o nome do atributo da função não deve ser camelCased, mas baseado em traços.

então - em vez de:

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

escrever:

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

Esta é a maneira angular de dizer a diferença entre os atributos da diretiva (como a função update-fn) e as funções.

Que tal passar a função do controlador com ligação bidirecional ? Em seguida, você pode usá-lo na diretiva exatamente da mesma maneira que em um modelo regular (retirei partes irrelevantes por simplicidade):

<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>

Cheguei a essa pergunta, porque tentei o método acima antes, mas de alguma forma não funcionou. Agora funciona perfeitamente.

use traço e letras minúsculas para o nome do atributo (como outras respostas disseram):

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

E use "=" em vez de "&" no escopo da diretiva:

 scope: { updateFn: '='}

Então você pode usar o updateFn como qualquer outra função:

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

Ai está!

Eu tive que usar a ligação "=" em vez de "&" porque isso não estava funcionando. Comportamento estranho.

@JorgeGRC Obrigado pela sua resposta. Uma coisa, no entanto, a parte "talvez" é muito importante. Se você possui parâmetros, também deve incluí-los no seu modelo e especificar seus locais, por exemplo updateFn({msg: "Directive Args"}.