Une directive angulaire peut-elle passer des arguments aux fonctions dans les expressions spécifiées dans les attributs de la directive?

J'ai une directive de formulaire qui utilise un callbackattribut spécifié avec une portée d'isolat:

scope: { callback: '&' }

Il se trouve à l'intérieur d'un ng-repeatafin que l'expression que je passe inclut le idde l'objet comme argument de la fonction de rappel:

<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>

Quand j'ai fini avec la directive, elle appelle $scope.callback()depuis sa fonction de contrôleur. Dans la plupart des cas, c'est bien, et c'est tout ce que je veux faire, mais parfois j'aimerais ajouter un autre argument de l'intérieur de directivelui - même.

Existe-t-il une expression angulaire qui permettrait ceci $scope.callback(arg2):, résultant en callbackun appel avec arguments = [item.id, arg2]?

Sinon, quelle est la meilleure façon de procéder?

J'ai trouvé que cela fonctionne:

<directive 
  ng-repeat = "item in stuff" 
  callback = "callback" 
  callback-arg="item.id"/>

Avec

scope { callback: '=', callbackArg: '=' }

et la directive appelant

$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );

Mais je ne pense pas que ce soit particulièrement soigné et que cela implique de mettre des éléments supplémentaires dans la portée d'isolat.

Y a-t-il un meilleur moyen?

Plunker aire de jeux ici (avoir la console ouverte).

Si vous déclarez votre rappel comme mentionné par @ lex82 comme

callback = "callback(item.id, arg2)"

Vous pouvez appeler la méthode de rappel dans la portée de la directive avec la mappe d'objets et elle ferait la liaison correctement. Comme

scope.callback({arg2:"some value"});

sans avoir besoin de $ parse. Voir mon violon (journal de la console) http://jsfiddle.net/k7czc/2/

Mise à jour : il y a un petit exemple de ceci dans la documentation :

& ou & attr - fournit un moyen d'exécuter une expression dans le contexte de la portée parent. Si aucun nom attr n'est spécifié, le nom d'attribut est supposé être le même que le nom local. Étant donné et la définition du widget de la portée: {localFn: '& myAttr'}, puis isoler la propriété de portée localFn pointera vers un wrapper de fonction pour l'expression count = count + value. Il est souvent souhaitable de transmettre des données de la portée isolée via une expression et à la portée parente, cela peut être fait en passant une carte des noms et des valeurs de variables locales dans le wrapper d'expression fn. Par exemple, si l'expression est incrément (montant), nous pouvons spécifier la valeur du montant en appelant le localFn en tant que localFn ({montant: 22}).

Rien de mal avec les autres réponses, mais j'utilise la technique suivante pour passer des fonctions dans un attribut de directive.

Laissez les parenthèses lorsque vous incluez la directive dans votre html:

<my-directive callback="someFunction" />

Puis «dépliez» la fonction dans le lien ou le contrôleur de votre directive. Voici un exemple:

app.directive("myDirective", function() {

    return {
        restrict: "E",
        scope: {
            callback: "&"                              
        },
        template: "<div ng-click='callback(data)'></div>", // call function this way...
        link: function(scope, element, attrs) {
            // unwrap the function
            scope.callback = scope.callback(); 

            scope.data = "data from somewhere";

            element.bind("click",function() {
                scope.$apply(function() {
                    callback(data);                        // ...or this way
                });
            });
        }
    }
}]);    

L'étape de "dépliage" permet d'appeler la fonction en utilisant une syntaxe plus naturelle. Cela garantit également que la directive fonctionne correctement même lorsqu'elle est imbriquée dans d'autres directives susceptibles de transmettre la fonction. Si vous n'avez pas fait le déballage, alors si vous avez un scénario comme celui-ci:

<outer-directive callback="someFunction" >
    <middle-directive callback="callback" >
        <inner-directive callback="callback" />
    </middle-directive>
</outer-directive>

Ensuite, vous vous retrouveriez avec quelque chose comme ça dans votre directive interne:

callback()()()(data); 

Ce qui échouerait dans d'autres scénarios d'imbrication.

J'ai adapté cette technique à partir d'un excellent article de Dan Wahlin à http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters

J'ai ajouté l'étape de déballage pour rendre l'appel de la fonction plus naturel et pour résoudre le problème d'imbrication que j'avais rencontré dans un projet.

Dans la directive ( myDirective):

...
directive.scope = {  
    boundFunction: '&',
    model: '=',
};
...
return directive;

Dans le modèle de directive:

<div 
data-ng-repeat="item in model"  
data-ng-click='boundFunction({param: item})'>
{{item.myValue}}
</div>

En source:

<my-directive 
model='myData' 
bound-function='myFunction(param)'>
</my-directive>

...où myFunction est défini dans le contrôleur.

Notez que paramdans le modèle de directive se lie parfaitement à paramdans la source et est défini sur item.

Pour appeler depuis la linkpropriété d'une directive ("à l'intérieur" de celle-ci), utilisez une approche très similaire:

...
directive.link = function(isolatedScope) {
    isolatedScope.boundFunction({param: "foo"});
};
...
return directive;

Oui, il existe un meilleur moyen: vous pouvez utiliser le service $ parse dans votre directive pour évaluer une expression dans le contexte de la portée parente tout en liant certains identificateurs de l'expression à des valeurs visibles uniquement dans votre directive:

$parse(attributes.callback)(scope.$parent, { arg2: yourSecondArgument });

Ajoutez cette ligne à la fonction de lien de la directive où vous pouvez accéder aux attributs de la directive.

Votre attribut de rappel peut alors être défini comme callback = "callback(item.id, arg2)"parce que arg2 est lié à yourSecondArgument par le service $ parse à l'intérieur de la directive. Les directives telles ng-clickque vous permettent d'accéder à l'événement click via l' $eventidentifiant à l'intérieur de l'expression passée à la directive en utilisant exactement ce mécanisme.

Notez que vous ne devez pas faire callbackun membre de votre étendue isolée avec cette solution.

Pour moi, la suite a fonctionné:

dans la directive, déclarez-le comme ceci:

.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            myFunction: '=',
        },
        templateUrl: 'myDirective.html'
    };
})  

Dans le modèle de directive, utilisez-le de la manière suivante:

<select ng-change="myFunction(selectedAmount)">

Et puis lorsque vous utilisez la directive, passez la fonction comme ceci:

<data-my-directive
    data-my-function="setSelectedAmount">
</data-my-directive>

Vous passez la fonction par sa déclaration et elle est appelée à partir de la directive et les paramètres sont renseignés.