Question

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

然而，在这种情况下，我甚至无法第一次打电话。我有以下代码......

jQuery的：

I'm refering global functions using it pointer like this :

.cpp file
pXXX YYY = (pXXX) 0x00403B7F;

.h file
typedef <return_type_function>(*pXXX)(<args>);
extern pXXX YYY;

HTML：

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

同样，前面提到的HTML是由Angular动态加载的视图的一部分。我想每次路线改变时都应用我的动画，但我甚至无法让动画在第一次加载时起作用。

Answer 1

我不确定你想在哪里调用动画的东西。但是，既然你说你甚至不能让它第一次工作那么我的猜测是你不知道在哪里放你的代码。尝试：

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

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

Answer 2

首先使用Angular和jQuery是不好的做法，但这里有一个可能有用的链接 How to use jQuery in AngularJS

var myEl = angular.element(document.querySelector( '#main-content-overlay'));   
myEl.fadeIn().animate({top:65}, 500);

它可能有点多，但它可以让你更好地了解实际发生的事情。

Answer 3

也许我的问题并不够具体，但我已经发现了答案。由于我并不打算在整个网站中将动画的这一部分包含在视图中，因此我只是将jQuery附加到控制器上，该控制器的范围覆盖了我的图像。然后我在该控制器的范围内创建了一个函数，并调用该函数。

我在相关控制器中的代码：

this.animateOverlay = function() {
    $("#main-content-overlay").fadeIn({queue: false, duration: 1000}).animate({top: "+=65px"}, 500);
};
this.animateOverlay();

将jQuery动画应用于Angular JS在加载时动态加载的视图中的元素？

3 个答案: