如何在angular js中监听dom就绪事件

How to listen to dom ready event in angular js

本文关键字：监听 dom 就绪 事件 js angular      更新时间：2023-10-04

这是我的示例

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;
})

我想使主节块高度适合父节但它不起作用。。。。

我尝试绑定$viewContentLoaded、$stateChangeSuccess、$includeContentLoaded，但仍然不起作用。

请帮帮我，谢谢。

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

您需要在您的Plunkr中包含jQuery文件。这将很好地工作

编辑（每次更新的更改）

正如你在问题中提到的，下面给出了所有三个事件的功能。

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

以上三个并不能告诉我们视图是否在UI上呈现。

删除所有事件，如$viewContentLoaded和all。然后在内部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>

工作Plunkr

希望这能对你有所帮助。谢谢

相关文章：