AngularJS指令&绑定调用控制器函数，动画回调为undefined求助

我来帮你梳理下为什么回调函数会返回undefined，以及怎么修复这个问题：

问题根源 #

你的代码主要有两个关键错误：

1. HTML中的绑定表达式写法不对
   &类型的绑定对应的是Angular表达式，而不是直接的函数名。你现在写的animationend="loadUrl"只是把函数名作为表达式，当指令里调用scope.animationend()时，相当于执行了loadUrl这个表达式——也就是直接调用了$scope.loadUrl()，但它的返回值是undefined（因为你的loadUrl函数没有return值），所以callback自然就是undefined。

2. 指令中调用&绑定的时机和方式错误
   你在link阶段就直接调用scope.animationend()并把结果赋值给callback，这相当于提前执行了一次控制器的函数，而且没有传递事件参数。正确的做法应该是在动画结束事件触发时，再去调用这个绑定的表达式，并且传递对应的参数。

修复后的代码 #

HTML部分

把绑定表达式改成带参数的形式，这样才能把事件对象传递给控制器函数：

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

JavaScript部分

调整指令的link函数，在事件触发时正确调用&绑定的表达式，并处理Angular的digest循环：

angular.module('animApp', ['ngAnimate'])
.controller('mainCtrl', function($scope) {
  $scope.loadUrl = function(event) {
    console.log("i am here", event);
  }
})
.directive('animationend', function() {
  return {
    restrict: 'A',
    scope: {
      animationend: '&'
    },
    link: function(scope, element) {
      const events = 'animationend webkitAnimationEnd MSAnimationEnd transitionend webkitTransitionEnd';
      element.on(events, function(event) {
        // 调用&绑定的表达式，传入参数映射：键对应HTML表达式里的变量名，值是实际参数
        scope.animationend({event: event});
        // DOM事件在Angular上下文外触发，需要手动触发digest循环
        scope.$apply();
      });
    }
  };
});

关键说明 #

• &绑定创建的是一个表达式执行函数，它接受一个对象参数，对象的键需要和HTML表达式里的变量名对应（比如这里的event），这样控制器函数才能拿到正确的参数。
• 因为DOM事件是在Angular的digest循环之外触发的，所以需要调用scope.$apply()来通知Angular处理回调中的操作，确保数据绑定等逻辑正常工作。

内容的提问来源于stack exchange，提问作者Mustang