Question

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

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

我想通过搜索机器人对这个SPA进行抓取，所以我使用无头浏览器（PhantomJS）来渲染页面[在解释javascript时]，然后将结果发送回搜索机器人。

我遇到的问题是PhantomJS在视图仍处于动画状态时发回结果，因此一些div在渲染时仍然是“透明的”（有时甚至仍然在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));

Answer 1

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

上设置分数上的对象

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

Answer 2

您可以使用$animate.enabled(false)

在运行（）阶段全局禁用动画

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

2 个答案: