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

是否有一种方法可以从控制器中手动加载视图，比如说首先触发了一些动画？我的场景是上一页内容向上滑动，之后视图将在离开屏幕时更新，并且一旦准备好，将使用新控制器的新视图向下滑动

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

---

如果可能的话，请使用小提琴？

控制器中的代码不应操纵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');
    }
   }
 }
);
}});

指令（'onloadSrc'，函数（$compile）{ 返回函数（范围、元素、属性）{ 元素绑定（'load'，function（））{ var parent=$compile（元素[0].parentElement）（范围）； if（！element.attr（'src'）&attrs.onload src）{ 元素attr（“src”，attrs.onload src）； //用splash spinner的模板替换此脏硬代码 var spinner_div=$compile（“”）（范围）； attrs.onloadSrc=“”； 父.prepend（微调器_div）； css（“显示”，“无”）； attrs.xloading=微调器/u div； } 否则{ 如果（属性xloading）{ attrs.xloading.remove（）； attrs.xloading=false； css（“显示”，“块”）； } } } ); }});

---

要使用此指令，请保留元素的空属性

src

，并填充属性

onload src

Angular在不稳定分支中内置动画，这应该完全适合您的场景。 去看看吧。

ng view

指令具有内置的“回车”和“离开”动画。

---

检查一下这个示例：它做的更多，你想要实现的更少。

没错，它有，但没有一个内置的是我想要的。我有一个特定的要求-在>点击链接中查看幻灯片，当前视图向上滑动>视图内容在窗口外被替换，并在窗口中滑动。还有一些场景是在视图滑出后滑入子导航（如果链接包含子导航）-正如您所看到的，标准动画无法满足我的需要。谢谢@OZ_2;，但这是用于控制器视图加载的吗？我已经创建了一个服务，然后将其注入控制器-在控制器中我调用了相关的方法-这也被认为是一种不好的做法吗？在控制器中使用服务肯定不是不好的做法-这是它们的目的。但对于DOM AngularJS的操作，有指令。也许我不理解你的问题-请在JSFIDLE中提供一些示例。这里是-尽管它似乎在JSFIDLE中根本不起作用：