Как вызвать функцию контроллера с выражением директивы `&` binding - PullRequest
Новая
       7

Как вызвать функцию контроллера с выражением директивы `&` binding

0 голосов
/ 24 мая 2018

Функция обратного вызова после завершения анимации не определена - angularjs

Я пытаюсь выполнить обратный вызов, как только анимация заканчивается.Вот пример , который я попробовал.Пожалуйста, откройте отладчик Chrome, чтобы увидеть сообщения журнала консоли.Обратный вызов возвращается как неопределенный.

Не могли бы вы помочь мне понять, почему обратный вызов не срабатывает?

Вот фрагмент кода.Более подробная информация доступна по ссылке выше: 

 angular.module('animApp', ['ngAnimate'])

.controller('mainCtrl', function($scope) {

  $scope.loadUrl = function(event) {
    console.log("i am here");
  }
})

.directive('animationend', function() {
    return {
        restrict: 'A',
        scope: {
            animationend: '&'
        },
        link: function(scope, element) {
            var callback = scope.animationend(),
                  events = 'animationend webkitAnimationEnd MSAnimationEnd' +
                        'transitionend webkitTransitionEnd';
       console.log("scope", scope);
            element.on(events, function(event) {
        console.log("elem", element[0]);
        console.log("event", event);
        console.log('callback', callback);
                callback.call(element[0], event);
            });
        }
    };
});

HTML 

<svg class="progress-circle definite" width="100" height="100" 
     animationend="loadUrl">
</svg>

1 Ответ

0 голосов
/ 24 мая 2018

Вызов функции в HTML: 

<svg class="progress-circle definite" width="100" height="100" 
     ̶a̶n̶i̶m̶a̶t̶i̶o̶n̶e̶n̶d̶=̶"̶l̶o̶a̶d̶U̶r̶l̶"̶  animationend="loadUrl($event)">
</svg>

Вызов обратного вызова с объектом localals: 

app.directive('animationend', function() {
    return {
        restrict: 'A',
        scope: {
            animationend: '&'
        },
        link: function(scope, element) {
            var ̶c̶a̶l̶l̶b̶a̶c̶k̶ ̶=̶ ̶s̶c̶o̶p̶e̶.̶a̶n̶i̶m̶a̶t̶i̶o̶n̶e̶n̶d̶(̶)̶,̶
            var events = 'animationend webkitAnimationEnd MSAnimationEnd' +
                         'transitionend webkitTransitionEnd';
            element.on(events, function(event) {
                var callback = scope.animationend;
                ̶c̶a̶l̶l̶b̶a̶c̶k̶.̶c̶a̶l̶l̶(̶e̶l̶e̶m̶e̶n̶t̶[̶0̶]̶,̶ ̶e̶v̶e̶n̶t̶)̶;̶
                callback({$event: event});
                scope.$apply();
            });
        }
    };
});

Из документов:

  • & или &attr - предоставляет способ выполнения выражения в контексте родительской области.Если имя атрибута не указано, то предполагается, что имя атрибута совпадает с локальным именем.Учитывая и определение изолированной области scope: { localFn:'&myAttr' }, свойство изолированной области localFn будет указывать на оболочку функции для выражения count = count + value.Часто желательно передавать данные из изолированной области через выражение в родительскую область.Это можно сделать, передав карту имен и значений локальных переменных в оболочку выражения fn.Например, если выражение равно increment(amount), то мы можем указать значение суммы, вызвав localFn как localFn({amount: 22}).

- API всеобъемлющей директивы AngularJS - область действия

...