使用 Angular 加载栏完成稍后添加类的请求答案

【问题标题】：Add class later request was completed with Angular loading bar使用 Angular 加载栏完成稍后添加类的请求
【发布时间】：2016-01-17 11:31:19
【问题描述】：

我正在使用 angular 和 angular-loading-bar 处理我的前端，我在控制器中放置了这段代码。

$rootScope.$on("cfpLoadingBar:completed",function(){
   $(".animated").addClass("fadeIn");
});

或

$scope.$on("cfpLoadingBar:completed",function(){
   $(".animated").addClass("fadeIn");
});

当所有 XHR 请求都返回后，我想在我的部分内容中添加一个类，但事件中的代码没有运行。

如何正确实现呢？

【问题讨论】：

标签： angularjs loading

【解决方案1】：

首先，检查您是否使用了适当的事件名称。例如，你确定它的名字是cfpLoadingBar:completed？可能是cfpLoadingBar::completed（这是一种非常常见的模式）或其他什么？

其次，确保您必须使用$rootScope 订阅此事件。也许你必须在一些具体的控制器中订阅它自己的$scope？

作为一个重要的建议：不要在你的代码中同时使用 JQUERY 和 Angular，不要把它搞砸！！！ Angular 有一个内置的可能性也可以作为 jquery 工作。您所需要的只是调用angular.element()，它会返回一个元素，就像使用jquery 一样。在你的情况下，你可以写angular.element(".animated").addClass("fadeIn");，它会做同样的事情，但以角度方式

【讨论】：

【解决方案2】：

是的，我同时使用 cfpLoadingBar::completed 和 cfpLoadingBar:completed 但不运行此事件。

另一方面，我只有一个控制器部分，它运行但我需要添加一个主控制器并注册此事件并在我的子控制器中使用 $broadcast 传播该事件。

这是 MainController 中的代码

$scope.$on('cfpLoadingBar:completed', function(event, data) {
      angular.element(".animated").addClass("fadeIn");
  });

这是其他子控制器中的代码

$rootScope.$broadcast('cfpLoadingBar:completed');

这是唯一的实现方式，我不知道为什么XD

感谢 Andrew 这种方式更好 angular.element()

【讨论】：