AngularJS：路由器：从控制器内部手动加载视图

有没有办法在首先触发一些动画后，从控制器内手动加载视图？我拥有的场景是前一页的内容向上滑动，之后视图会在屏幕外更新并且一旦准备就绪时 - 从新控制器的新视图向下滑动。AngularJS：路由器：从控制器内部手动加载视图

我已经建立了路由器，但只要调用新的控制器，它就会立即替换视图。

任何小提琴如果可能请吗？

2013-07-31 Spencer Mark

控制器中的代码不应该操纵DOM，指令应该。这里是指令，以防止“SRC”元素的内容预加载（通过浏览器的解析器），只有加载后显示元素的含量，并加载显示飞溅微调前：

directive('onloadSrc', function($compile) { 
return function(scope, element, attrs) { 
    element.bind('load', function() { 
    var parent = $compile(element[0].parentElement)(scope); 
    if (!element.attr('src') && attrs.onloadSrc) { 
     element.attr("src", attrs.onloadSrc); 
     // replace this dirty hardcode with your template for splash spinner           
     var spinner_div = $compile('<div style="z-index: 100; width: '+element.attr('width')+'px; height: '+element.attr('height')+'px; display:block; vertical-align:middle;"><img src="/img/spinner.gif" style="position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px;"/></div>')(scope); 
     attrs.onloadSrc = ""; 
     parent.prepend(spinner_div); 
     element.css("display", 'none'); 
     attrs.xloading = spinner_div; 
    } 
    else { 
    if (attrs.xloading) { 
     attrs.xloading.remove(); 
     attrs.xloading = false; 
     element.css("display", 'block'); 
    } 
    } 
} 
); 
}});

使用该指令，留空属性元素的src和填充属性onload-src。

来源

2013-07-31 11:12:08

谢谢@OZ_，但是对于控制器视图加载？我创建了一个服务，然后将它注入到控制器中 - 在控制器中我调用了相关的方法 - 是否也被认为是不好的做法？ –

在控制器中使用Service绝对不是坏习惯 - 这是他们制作的原因。但是对于使用DOM AngularJS操作的指令。也许我不明白你的问题 - 请在jsfiddle中提供一些例子。 –

谢谢 - 我会准备一张并且很快更新票。 –

Angular动画内置在不稳定的分支中，这应该完全适合您的场景。只需退房http://www.nganimate.org/angularjs/tutorial/how-to-make-animations-with-angularjs。 ng-view指令构建了“输入”和“离开”动画。检查你这个样本：http://jsfiddle.net/nFhX8/18/哪些做更多你想达到什么。

来源

2013-07-31 11:46:47

没错 - 它有，但没有内置的是我所追求的。我有一个具体的要求 - 查看幻灯片在>点击链接，当前视图向上滑动>查看内容被替换为窗口外部并滑入。在视图滑出后还有子导航滑入的场景（如果链接包含子导航） - 正如你所看到的标准动画不会做我所需要的。 –

AngularJS：路由器：从控制器内部手动加载视图

回答

相关问题