根据滤镜的值有条件地添加 ng-animate 指令
Conditionally add the ng-animate directive depending on a filter's value
我正在使用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));
您应该能够将ng-animate
绑定到作用域变量。然后从控制器$scope.animations = isHeadlessBrowser ? { enter: ..., leave: ...} : {}
将对象设置为乐谱
在您的指令中使用ng-animate="animations"
您可以使用 $animate.enabled(false( 在 run(( 阶段全局禁用动画
相关文章:
- 通过jQuery添加ng样式属性,angular不更新
- 如何在多变量比较的基础上添加ng类
- 添加ng单击到highcharts ng柱状图xAxis标签
- 动态添加 ng 表单和验证
- 在所选元素的父元素上添加“ng-class”
- ng-animate 当 ng-view 通过路由更新时
- 动态添加ng模式,缺少验证类
- 从指令中向元素添加ng-if属性
- 角度ng-animate导致模型上的奇怪动画更改
- 重新编译角度指令以编程方式添加 ng-module 和 ng-change
- 在输入不匹配时添加 ng 无效类
- ng-animate 不允许动画完成
- ui-router 如何与 ng-animate 一起工作
- 根据滤镜的值有条件地添加 ng-animate 指令
- 如何在 AngularJS 中的指令模板中添加 ng 类
- ng-show 无法在 ng-animate 中正常工作
- Angular 在 ng-if 中添加 ng-show
- angularJS仅在javascript对象中存在时添加ng href
- 使用Angular+ng animate以圆形方式设置列表的动画
- AngularJS:模板添加ng点击不开火