[英]Weird behavior of $viewContentLoaded in Angular
我正在編寫一個jQuery代碼,該代碼需要在加載模板視圖和修改DOM之后立即執行。
$viewContentLoaded
,我在控制器中使用$viewContentLoaded
事件 。
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
page_content_onresize();
});
但是不幸的是, $viewContentLoaded
不適用於我。
因為我的代碼需要在加載視圖中的模板后修改DOM之后立即應用, 但是當我不使用該ng-view並且不使用任何模板直接加載html時,一切工作正常 。
我嘗試了所有操作,但沒有使用$viewContentLoaded
使腳本正常運行。
因此,我將代碼更改為類似的代碼,然后一切正常。
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
setTimeout(page_content_onresize, 0);
});
我不明白為什么它在第一種情況下不起作用?
function page_content_onresize(){
$(".page-content,.content-frame-body,.content-frame-right,.content-frame-left").css("width","").css("height","");
var content_minus = 0;
content_minus = ($(".page-container-boxed").length > 0) ? 40 : content_minus;
content_minus += ($(".page-navigation-top-fixed").length > 0) ? 50 : 0;
var content = $(".page-content");
var sidebar = $(".page-sidebar");
if(content.height() < $(document).height() - content_minus){
content.height($(document).height() - content_minus);
}
if(sidebar.height() > content.height()){
content.height(sidebar.height());
}
if($(window).width() > 1024){
if($(".page-sidebar").hasClass("scroll")){
if($("body").hasClass("page-container-boxed")){
var doc_height = $(document).height() - 40;
}else{
var doc_height = $(window).height();
}
$(".page-sidebar").height(doc_height);
}
if($(".content-frame-body").height() < $(document).height()-162){
$(".content-frame-body,.content-frame-right,.content-frame-left").height($(document).height()-162);
}else{
$(".content-frame-right,.content-frame-left").height($(".content-frame-body").height());
}
$(".content-frame-left").show();
$(".content-frame-right").show();
}else{
$(".content-frame-body").height($(".content-frame").height()-80);
if($(".page-sidebar").hasClass("scroll"))
$(".page-sidebar").css("height","");
}
if($(window).width() < 1200){
if($("body").hasClass("page-container-boxed")){
$("body").removeClass("page-container-boxed").data("boxed","1");
}
}else{
if($("body").data("boxed") === "1"){
$("body").addClass("page-container-boxed").data("boxed","");
}
}
}
加載模板后,將觸發$viewContentLoaded
事件。 它不能保證已加載的模板在頁面上呈現。
angular.js的代碼片段
var clone = $transclude(newScope, function(clone) {
$animate.enter(clone, null, currentElement || $element).then(function onNgViewEnter() {
if (angular.isDefined(autoScrollExp)
&& (!autoScrollExp || scope.$eval(autoScrollExp))) {
$anchorScroll();
}
});
cleanupLastView();
});
currentElement = clone;
currentScope = current.scope = newScope;
currentScope.$emit('$viewContentLoaded');
currentScope.$eval(onloadExp);
ngAnimate.js的代碼片段
enter: function(element, parentElement, afterElement, options) {
options = parseAnimateOptions(options);
element = angular.element(element);
parentElement = prepareElement(parentElement);
afterElement = prepareElement(afterElement);
classBasedAnimationsBlocked(element, true);
$delegate.enter(element, parentElement, afterElement);
return runAnimationPostDigest(function(done) {
return performAnimation('enter', 'ng-enter', stripCommentsFromElement(element), parentElement, afterElement, noop, options, done);
});
}
$ animate.enter不同步。
因此,首先發出$viewContentLoaded
,然后將內容呈現到頁面上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.