Angular 中 $viewContentLoaded 的奇怪行为答案

【问题标题】：Weird behavior of $viewContentLoaded in AngularAngular 中 $viewContentLoaded 的奇怪行为
【发布时间】：2015-03-26 17:12:09
【问题描述】：

我正在编写一个 jquery 代码，我需要在加载模板视图并修改 DOM 后立即执行该代码。

为此，我在我的控制器中使用$viewContentLoaded event。

$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","");
        }
    }
}

【问题讨论】：

控制台有错误吗？
@mohamedrias 控制台上没有显示错误。
可能是stackoverflow.com/questions/16223819/…
@mohamedrias Na 并非如此。控制器正在捕获 $viewContentLoaded 和$viewContentLoaded event 被调用。但是我认为在调用此事件时 DOM 没有被修改，这可能就是为什么在 $viewContentLoaded 中使用 setTimeout 函数时它起作用的原因。
我强烈建议将您的 jQuery 代码移动到指令中，这样您就可以保证它会在正确的时间触发。

标签： javascript jquery angularjs angularjs-scope

【解决方案1】：

$viewContentLoaded 事件将在模板加载后触发。它不会保证加载的模板在页面上呈现。

来自 angular.js 的代码 sn-p

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 的代码 sn-p

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 首先被发出，然后内容被渲染到页面上。

【讨论】：