javascript - 将 jQuery 动画应用于加载时由 Angular JS 动态加载的 View 中的元素？

Question

我有一个使用 Angular JS 路由的单页面应用程序。在动态加载 View 之一的元素上，我想应用 jQuery 动画。仅仅在页面底部包含 jQuery 脚本是不够的，因为理论上它应该只被调用一次。

但是，既然如此，我什至无法让它第一次调用。我有以下代码...

jQuery:

$("#main-content-overlay").fadeIn().animate({top:65}, 500);

HTML:

<img src="images/home/main-content-background.jpg" id="main-content" />
<img src="images/home/main-content-overlay.png" id="main-content-overlay" />

同样，前面提到的 HTML 是由 Angular 动态加载的 View 的一部分。我希望每次路线更改时都应用我的动画，但我什至无法让动画在第一次加载时工作。

Answer 1

我不确定你想在哪里调用动画内容。但是，既然您说您甚至无法第一次使其工作，那么我的猜测是您不知道将代码放在哪里。尝试:

$scope.$on('$locationChangeStart', function(event) {
  // Do something here (like calling your animation)
});

您可以在此处查看可能提供更多有用信息的讨论 https://github.com/angular/angular.js/issues/2109