如何在 Angular js 中收听 dom 就绪事件答案

【问题标题】：How to listen to dom ready event in angular js如何在 Angular js 中收听 dom 就绪事件
【发布时间】：2015-04-12 17:59:57
【问题描述】：

这是我的例子

http://plnkr.co/edit/Foc5vEa5HJ0Uz1fGZXtS?p=preview

css：

.header{
  background:#f00;
  height: 40px;
  position: fixed;
  width: 100%;
}
html,body{
  height:100%;
  margin:0;
}
.footer{
  background:#00f;
  height:40px;
}
.main{
  padding-top:40px;
  min-height:calc(100% - 80px);
}
.main-section{
  height:100%;
  background:#fF0;
}
.fit-parent-height{
  height:100%;
}

html:

  <body ng-controller="MainCtrl">
    <div class="header">HEADER</div>
    <div class="main" fit-parent-height> 
      <div class="main-section" ng-include="'main-section.html'" ></div>
      <div class="footer">FOOTER</div>  
    </div>
  </body>

js:

scope.$on('$viewContentLoaded',function(e){
     //add class to change min-height to height in css;
})

我想让 main-section 块高度适合父级但它不起作用....

我尝试绑定$viewContentLoaded、$stateChangeSuccess、$includeContentLoaded，但还是不行。

请帮帮我，谢谢。

【问题讨论】：

标签： javascript jquery angularjs events angularjs-ng-include

【解决方案1】：

您的代码完全正确。它在el.outerHeight() 功能上失败了。其背后的原因是 Angular 内部使用了更轻量级的 jQuery 版本，不过 jqLite API & In jqLite API 不包含 outerHeight() 方法。

您需要在 Plunkr 中包含 jQuery 文件才能正常工作

编辑（每次更新的更改有问题）

正如您在问题中提到的，所有三个事件的功能如下所示。

$includeContentRequested 每次请求 ngInclude 内容时发出 $viewContentLoaded 每次重新加载 ngView 内容时发出。 $stateChangeSuccess 在哈希 url 发生变化时调用

以上三个都没有告诉我们视图是否在 UI 上呈现。

删除所有事件，如 $viewContentLoaded 和所有。然后在你内部ng-include="'test.html'"的div上添加ng-init="switchFitParent()"

ng-init 将调用包含ng-include 指令的div 的渲染，然后switchFitParent() 方法的方法将设置/删除类。

main-section.html

<div>
  <style>
    h3{margin:0};
  </style>
  <h3>MAIN SECTION</h3>
  <div ng-include="'test.html'" ng-init="switchFitParent()"></div>
</div>

Working Plunkr

希望这可以帮助你。谢谢。

【讨论】：

感谢您的回复。我忘了在plunker 中包含 jquery 库。我在 plunker 中更新了我的代码。我认为我的问题是当我有两个级别的 ng-include 时，如何在 dom 准备好之后做一些事情。再次感谢您。
@miterfrants 答案已添加，请检查。它是否按预期工作？
@pankajpakar 再次感谢您。如果我有很多 ng-include 我必须在每个地方添加 ng-init 对吗？没有懒惰的解决方案？
是的..在你的情况下是..但有时可能会出现这种情况，你可能需要使用$timeout(function(){//your code}); $timeout 在当前摘要周期完成旁边得到调用