根据过滤器的值有条件地添加 ng-animate 指令答案

【问题标题】：Conditionally add the ng-animate directive depending on a filter's value根据过滤器的值有条件地添加 ng-animate 指令
【发布时间】：2013-10-10 10:25:37
【问题描述】：

我正在使用 AngularJS 开发单页应用程序。

使用ng-animate="{enter: 'appear', leave: 'disappear'}"进入和离开时视图会被动画化。

我想让这个 SPA 被搜索机器人抓取，所以我使用无头浏览器 (PhantomJS) 来呈现页面 [同时解释 javascript]，然后将该结果发送回搜索机器人。

我遇到的问题是 PhantomJS 在视图仍在动画时发回结果，因此一些divs 在渲染回来时仍然“透明”（甚至有时仍然在opacity:0 - 这在SEO imo 条款）。

我的解决方案是在检测到无头浏览器时禁用动画。

我的问题是如何根据过滤器的值有条件地添加 ng-animate 指令？

我尝试使用指令：

<div id="content"
     data-ng-view
     ng-attr-ng-animate="{{ isHeadlessBrowser && '' }}"
     ng-animate="{enter: 'appear', leave: 'disappear'}"
     class="container"
></div>

但它不起作用，因为ng-attr-ng-animate 呈现为nganimate 而不是ng-animate.. 我也尝试使用ng-attr-ng\-animate 和ng-attr-ng--animate。

我也尝试过使用 attr-class：

<div id="content"
     data-ng-view
     ng-attr-class="{{ isHeadlessBrowser && '.container' }}"
     class="container ng-animate:\"{enter: 'appear', leave: 'disappear'}\""
></div>

这里是我的无头浏览器检测过滤器供参考：

(function (window, angular, $) {

  'use strict';

  angular
    .module('App.filters', [])
    .filter('isHeadlessBrowser',
      function(){
        return function(){
          return ( /(PhantomJS)/g.test(navigator.userAgent) );
        };
      }
    );

}(window, window.angular, window.jQuery));

【问题讨论】：

可能值得注意的是，从 Angular 1.2 开始，动画 API 已被重构。您将不再需要 ng-animate 属性。 yearofmoo.com/2013/08/…
感谢您指出这一点！不错的文章。

标签： javascript angularjs seo phantomjs ng-animate

【解决方案1】：

您应该能够将ng-animate 绑定到范围变量。然后从控制器$scope.animations = isHeadlessBrowser ? { enter: ..., leave: ...} : {}将对象设置在乐谱上

在你的指令中使用ng-animate="animations"

【讨论】：

【解决方案2】：

您可以在 run() 阶段使用 $animate.enabled(false) 全局禁用动画

【讨论】：