Javascript AngularJS-动画完成后调用控制器方法

我有一个按钮和一个隐藏的div。当我单击按钮时，div将扩展宽度。这是迄今为止我的HTML：

<div ng-controller="PageController">
   <button ng-click="togglePage()>Show Details</div>
   <div class="page-slide-animation" ng-show="page">
   </div>
</div>

这是我的动画：

app.animation('.page-slide-animation', [function() {
    return {
        beforeAddClass : function(element, className, done) {
            if(className == 'ng-hide') {
                jQuery(element).animate({width: 'toggle'}, function() {
                    done();
                });
            }
        },
        removeClass : function(element, className, done) {
            if(className == 'ng-hide') {
                jQuery(element).animate({width: 'toggle'}, function() {
                    done();
                });
            }
        }
    };
}]);

---

到目前为止，这一切都很好。我需要做的是在动画完成后调用

PageController

中的controller方法。执行此操作的最佳方式是什么（在控制器中使用超时，向动画注入服务，…）？

一种可能的解决方案是使用$rootScope发出事件。$emit并将其捕获到控制器中。

尝试使用$scope。$emit并使用$scope在控制器中捕获此事件。$on

类似于以下内容：单击按钮可激活2秒后调用的函数。此函数调用一个服务，该服务发出一个被另一个控制器捕获的事件。这是否也与动画一起工作？或者我必须将服务传递到动画中并在那里使用它吗？如果您打算在动画中直接使用它，那么是的，您必须将其注入。距离：app.animation（“.page slide animation”、[“$rootScope”、函数（$rootScope）

app.animation('.page-slide-animation', [function() {
    return {
        beforeAddClass : function(element, className, done) {
            if(className == 'ng-hide') {
                jQuery(element).animate({width: 'toggle'}, function() {
                    done();
                });
            }
        },
        removeClass : function(element, className, done) {
            if(className == 'ng-hide') {
                jQuery(element).animate({width: 'toggle'}, function() {
                    done();
                });
            }
        }
    };
}]);