Angular-使用ng view时，Jquery精灵开关动画停止工作

我有一个精灵动画，在动画完成播放后切换到下一个精灵动画

我最初使用Jquery进行切换，但现在我已经实现了Angular的路由，所有Jquery都停止了工作

我查了一下，发现可能是HTML中的脚本顺序错误，但当我尝试将Jquery移到AngularJs脚本之上时，它并没有解决问题

我进一步研究了它，发现我需要将Jquery更改为AngularJS指令。我该怎么做呢

每一个试图解释它是如何完成的站点，都只显示了前后代码。这对我来说没有多大意义。有人能告诉我怎么做吗

//这是我使用的原始Jquery代码。我想用指令来工作
//$（文档）.ready（函数（）{
//$（“.hero unit.land animation”）.one（'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'，function（）{
//$（this.addClass（“land-animation2”）；
//    });
// });
//这就是我试图在Angular中做的。
var app=angular.module（'app'，['ui.boostrap'，'ngRoute']）；
app.directive（'directiveName'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
$（元素）。
“pluginActivationFunction”（作用域$eval（attrs.directiveName））；
}
};
});
/*SCSS*/
@混音动画（$str）{
-webkit动画：{$str}；
-moz动画：{$str}；
/*-ms-前缀已删除*/
-o-动画：{$str}；
动画：{$str}；
}
.土地动画{
宽度：700px；
身高：493px；
背景：url（'../images/front animation.jpg'）左中；
动画延迟：0.1s；
z指数：10；
@包括动画（播放4.0s步骤（48））；
}
@包括关键帧（播放）{
100%{背景位置：-33600px；}
}
.陆上动画2{
宽度：700px；
身高：493px；
背景：url（'../images/front-animation2.jpg'）左中；
@包括动画（播放2 4.0s步骤（48）无限）；
z指数：10；
}
@包括关键帧（播放2）{
100%{背景位置：-33600px；}
}
.英雄单位{
利润率：70像素自动；
显示：内联块；
位置：相对位置；
}

指令是复杂的东西，但我会看看好的，我会看看。所以没有办法让我编写的jquery工作？而不是尝试将所有内容重新编码为Angular？据我所知，让jquery动画在Angular中工作的唯一方法是将它们构建到.animations指令中（该指令使用jquery）。Angular是它自己的框架，因此与其他框架并不总是很好地配合。@JessPatton我四处搜索，偶然发现了这个链接。它显示了动画完成后如何使用“&”发送回调。我如何才能做到这一点，而不是发送警报，让它切换到我的下一个动画？看起来你需要一个指令，看到这个答案吗