gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:29:16 25 4
gpt4 key购买 nike

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

使用 ng-animate="{enter: 'appear', leave: 'disappear'}".

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

我遇到的问题是 PhantomJS 在 View 仍在动画时发回结果,因此一些 div 在渲染回来时仍然是“透明的”(甚至有时仍在 opacity:0 - 这在 SEO imo 方面很糟糕。

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

我的问题是如何根据过滤器的值有条件地添加 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>

这里是我的 headless 浏览器检测过滤器供引用:

(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 绑定(bind)到范围变量。然后在 Controller $scope.animations = isHeadlessBrowser 的分数上设置对象? { 输入:...,离开:...}:{}

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

关于javascript - 根据过滤器的值有条件地添加 ng-animate 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19293241/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com