Question

动画结束后的函数回调未定义 - angularjs

我想在动画结束后立即进行回调。这是我尝试过的example。请打开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>

Answer 1

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

使用locals对象调用回调：

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 - 提供了在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。给定和隔离范围定义scope: { localFn:'&myAttr' }，隔离范围属性localFn将指向count = count + value表达式的函数包装器。通常需要通过表达式将数据从隔离范围传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如，如果表达式为increment(amount)，那么我们可以通过将localFn称为localFn({amount: 22}来指定金额值。


—AngularJS Comprehensive Directive API - scope

如何使用指令表达式`＆amp;`binding

动画结束后的函数回调未定义 - angularjs

1 个答案: