我正在使用 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\-animateand 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));