web-dev-qa-db-fra.com

Angular: fonction du contrôleur d’appel dans une fonction de liaison de directive utilisant &

Nous rencontrons un problème en essayant d'appeler une fonction passée dans une directive en utilisant l'esperluette '&' dans la fonction link de notre directive.

Il semble que la fonction est appelée sur le contrôleur mais aucun argument n’est passé dans l’appel. Tous les exemples que nous avons vus impliquent un passage en créant un appel dans un modèle. Existe-t-il un moyen d'appeler une fonction sur votre directive à partir de son modèle, puis de faire quelque chose dans la directive qui appelle la fonction de contrôleur transmise?

angularjsangularjs-directive
60
Walt Weidner

Êtes-vous en train de passer les arguments dans {} S? Par exemple, dans la fonction link de la directive, vous voudrez appeler la méthode comme suit: scope.someCtrlFn({arg1: someValue});

<div my-directive callback-fn="ctrlFn(arg1)"></div>

app.directive('myDirective', function() {
    return {
        scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

violon .

156
Mark Rajcok

En plus de la réponse de Mark, je voudrais souligner que vous pouvez épargner quelques lettres en utilisant le & sténographie. Cela supposera que le callback-fn référencé dans votre code HTML existe en tant que scope.callbackFn à votre portée. Tout le reste est toujours identique, donc il n'y a que 2 lignes à changer. J'ai gardé la version de Mark sous forme de commentaires, vous devriez donc pouvoir facilement distinguer la différence.

<div my-directive callback-fn="ctrlFn(arg1)"></div>

app.directive('myDirective', function() {
    return {
        scope: { callbackFn: '&' }, //scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.callbackFn({arg1: 22}); //scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}
30
robro