如何使用指令表达式“&”绑定调用控制器函数

Question

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

我正在尝试在动画结束后立即进行回调。这是我试过的 example。请打开 chrome 调试器以查看控制台日志消息。回调返回未定义。

你能帮我理解为什么回调没有开始吗？

这是代码片段。上面的 link 中提供了更多详细信息：

 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>

使用本地对象调用回调：

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

来自文档：

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and the isolate scope definition scope: { localFn:'&myAttr' }, the isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

—AngularJS Comprehensive Directive API - scope

如何使用指令表达式“&”绑定调用控制器函数

How to invoke controller function with directive expression `&` binding

angularjs

angularjs-directive

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