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：路由器：從控制器內部手動加載視圖

回答

相關問題