AngularJS - passa la funzione alla direttiva

Ho un esempio 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>

Voglio quando faccio clic sul pulsante, verrà visualizzata la finestra di avviso, ma non viene visualizzato nulla.

Qualcuno può aiutarmi?

Per chiamare una funzione del controller nell'ambito del genitore dall'interno di una direttiva dell'ambito dell'isolato, utilizzare i dash-separatednomi degli attributi nell'HTML come indicato dall'OP.

Inoltre, se si desidera inviare un parametro alla propria funzione, chiamare la funzione passando un oggetto:

<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

Forse mi manca qualcosa, ma sebbene le altre soluzioni chiamino la funzione dell'ambito padre non esiste la possibilità di passare argomenti dal codice della direttiva, ciò è dovuto al fatto che update-fnsta chiamando updateFn()con parametri fissi, ad esempio {msg: "Hello World"}. Una leggera modifica consente alla direttiva di passare argomenti, che ritengo molto più utili.

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

Nota che l'HTML sta passando un riferimento di funzione, ovvero senza ()parentesi.

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

Quindi, in quanto sopra, l'HTML sta chiamando la callUpdatefunzione di ambito locale , che quindi "recupera" updateFn dall'ambito padre e chiama la funzione restituita con parametri che la direttiva può generare.

http://jsfiddle.net/mygknek2/

Nel tag Html della direttiva "test", il nome dell'attributo della funzione non deve essere camelCased, ma basato su un trattino.

quindi - invece di:

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

Scrivi:

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

Questo è il modo in cui Angular rileva la differenza tra gli attributi della direttiva (come la funzione update-fn) e le funzioni.

Che ne dici di passare la funzione controller con associazione bidirezionale ? Quindi puoi usarlo nella direttiva esattamente allo stesso modo di un modello normale (ho rimosso parti irrilevanti per semplicità):

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

Sono arrivato a questa domanda, perché ho provato il metodo sopra accendendo, ma in qualche modo non ha funzionato. Ora funziona perfettamente.

usa trattino e lettere minuscole per il nome dell'attributo (come hanno detto altre risposte):

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

E usa "=" invece di "&" nell'ambito della direttiva:

 scope: { updateFn: '='}

Quindi puoi usare updateFn come qualsiasi altra funzione:

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

Ecco qua!

Ho dovuto usare l'associazione "=" invece di "&" perché non funzionava. Strano comportamento.

@JorgeGRC Grazie per la risposta. Una cosa però, la parte "forse" è molto importante. Se si dispone di parametri, è necessario includerli anche nel modello e assicurarsi di specificare i locali, ad es updateFn({msg: "Directive Args"}.