AngularJS - passe la fonction à la directive

J'ai un exemple 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>

Je veux que lorsque je clique sur le bouton, la boîte d'alerte apparaît, mais rien ne s'affiche.

Quelqu'un peut-il m'aider?

Pour appeler une fonction de contrôleur dans la portée parent à partir d'une directive de portée isolate, utilisez dash-separated noms d'attribut dans le HTML comme le dit l'OP.

Aussi si vous souhaitez envoyer un paramètre à votre fonction, appelez la fonction en passant un objet:

<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

Il me manque peut-être quelque chose, mais bien que les autres solutions appellent la fonction de portée parent, il n'y a pas de possibilité de passer des arguments à partir du code de directive, c'est parce que l' update-fnappel est updateFn()avec des paramètres fixes, par exemple {msg: "Hello World"}. Un léger changement permet à la directive de transmettre des arguments, ce que je pense être beaucoup plus utile.

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

Notez que le HTML passe une référence de fonction, c'est-à-dire sans ()crochets.

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

Ainsi, dans ce qui précède, le HTML appelle la callUpdatefonction de portée locale , qui `` récupère '' ensuite le updateFn de la portée parent et appelle la fonction retournée avec des paramètres que la directive peut générer.

http://jsfiddle.net/mygknek2/

Dans votre balise Html directive 'test', le nom d'attribut de la fonction ne doit pas être camelCased, mais basé sur des tirets.

donc - au lieu de:

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

écrire:

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

C'est la manière angulaire de faire la différence entre les attributs de directive (comme la fonction update-fn) et les fonctions.

Que diriez-vous de passer la fonction de contrôleur avec la liaison bidirectionnelle ? Ensuite, vous pouvez l'utiliser dans la directive exactement de la même manière que dans un modèle normal (j'ai supprimé les parties non pertinentes pour plus de simplicité):

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

J'ai atterri à cette question, parce que j'ai essayé la méthode ci-dessus befire, mais cela n'a pas fonctionné. Maintenant, cela fonctionne parfaitement.

utilisez le tiret et les minuscules pour le nom de l'attribut (comme l'ont dit d'autres réponses):

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

Et utilisez "=" au lieu de "&" dans la portée de la directive:

 scope: { updateFn: '='}

Ensuite, vous pouvez utiliser updateFn comme toute autre fonction:

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

Voilà!

J'ai dû utiliser la liaison "=" au lieu de "&" car cela ne fonctionnait pas. Comportement étrange.

@JorgeGRC Merci pour votre réponse. Une chose cependant, la partie «peut-être» est très importante. Si vous avez des paramètres, vous devez également les inclure dans votre modèle et vous assurer de spécifier vos sections locales, par exemple updateFn({msg: "Directive Args"}.