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

Conditionally add the ng-animate directive depending on a filter's value

本文关键字:添加 ng-animate 指令 有条件 滤镜      更新时间:2023-09-26

我正在使用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'-animateng-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));

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

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

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