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

【问题标题】：AngularJS : router : load view manually from within controllerAngularJS：路由器：从控制器内手动加载视图
【发布时间】：2013-07-31 19:46:47
【问题描述】：

在说首先触发了一些动画之后，有没有办法从控制器中手动加载视图？我的场景是上一页内容向上滑动，之后视图将在离开屏幕并准备就绪后更新 - 使用来自新控制器的新视图向下滑动。

我已经设置了路由器，但它只是在调用新控制器时立即替换视图。

如果可能的话，请提供任何小提琴？

【问题讨论】：

标签： animation angularjs controller

【解决方案1】：

Controller 中的代码不应该操纵 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。

【讨论】：

谢谢@OZ_，但这是为了加载控制器视图吗？我创建了一个服务，然后将其注入控制器 - 在控制器中我调用相关方法 - 这也被认为是一种不好的做法吗？
在 Controller 中使用 Service 绝对不是坏习惯——这就是它们的用途。但是对于 DOM 的操作，AngularJS 有指令。也许我不明白您的问题 - 请在 jsfiddle 中提供一些示例。
在这里 - 虽然它似乎根本无法在 jsfiddle 中工作：jsfiddle.net/scabro/Hdh78/6

【解决方案2】：

Angular 在不稳定的分支中内置了动画，这应该完全适合您的场景。只需查看http://www.nganimate.org/angularjs/tutorial/how-to-make-animations-with-angularjs。 ng-view 指令内置了“进入”和“离开”动画。检查你这个样本：http://jsfiddle.net/nFhX8/18/，它做的事情你想要实现的东西更少。

【讨论】：

没错 - 它有，但没有一个内置的是我所追求的。我有一个特定的要求-视图滑入>单击链接并向上滑动当前视图>视图内容被替换到窗口外并滑入。视图滑出后也有子导航滑入的场景（如果链接包含子导航）-正如您所见，标准动画无法满足我的需求。