在我的应用程序中,我想在加载过程中显示加载指示。我已经成功地实现了这一点:
lyr.ui.directive('loading', ['$timeout', function($timeout) {
return function(scope, element, attr) {
element.addClass('content-loading');
var unbind = scope.$watch(attr.loading, function(value) {
if (value) {
element.removeClass('content-loading');
element.addClass('content-loaded');
$timeout(function() {
element.removeClass('content-loaded');
}, 250);
unbind();
}
});
};
}]);
Plunker:http ://plnkr.co/edit/L6opqA?p=preview
但是,我认为我在添加和删除类时复制了很多 ngAnimate 代码,并且在content-loaded
使用硬编码超时对删除进行硬编码时。
是否可以将我的示例转换为使用重复代码较少的 ngAnimate?
我自己很难弄清楚这一点,因为关于 ngAnimate 的文档并不关注 JS 触发的动画。
没有反映在 plunker 中的小注意事项:我必须在加载期间渲染元素的子元素,因为该元素包含一个调用 jQuery 插件,$.width
对于未渲染的元素,它将返回 0。