Angular: вызов функции контроллера внутри функции директивной ссылки с использованием &

У нас возникает проблема с вызовом функции, переданной в директиву с использованием амперсанда '&' в нашей функции директивной ссылки.

Кажется, что функция вызывается на контроллере, но аргументы в вызове не передаются. Все примеры, которые мы видели, включают прохождение через создание вызова в шаблоне. Есть ли способ вызвать функцию из вашей директивы из своего шаблона, а затем сделать что-то в директиве, которая вызывает функцию контроллера, переданную в нее?

Ответ 1

Вы передаете аргументы внутри {} s? Например, внутри функции директивной ссылки вы хотите вызвать метод следующим образом: 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);
    }
}

Fiddle.

Ответ 2

В дополнение к ответу Марка я хотел бы указать, что вы можете сэкономить несколько букв с помощью сокращения &. Это предполагает, что callback-fn, указанный в вашем HTML, существует как scope.callbackFn в вашей области. Все остальное по-прежнему остается прежним, поэтому есть всего две строки для изменения. Я сохранил версию Mark в качестве комментариев, чтобы вы могли легко разглядеть разницу.

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