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

Question

这是我的例子

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，但仍然无效。

请帮助我，谢谢。

Answer 1

您的代码完全正确。它在 el.outerHeight() 函数处失败。其背后的原因是 Angular 内部使用 jQuery 的轻量级版本 ehich 只不过是 jqLite API & 在 jqLite API doesn't contain the outerHeight() 方法中。

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

编辑（每次更新的更改）

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

$includeContentRequested Emitted every time the ngInclude content is requested $viewContentLoaded Emitted every time the ngView content is reloaded. $stateChangeSuccess Called when hash url change occurs

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

删除 $viewContentLoaded 等所有事件。然后在你内心的 ng-include="'test.html'"

的 div 上添加 ng-init="switchFitParent()"

ng-init 将调用包含 ng-include 指令的 div 的渲染，然后 switchFitParent() 方法的方法将 set/remove class.

主-section.html

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

Working Plunkr

希望对您有所帮助。谢谢。

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

How to listen to dom ready event in angular js

javascript

jquery

events

angularjs

angularjs-ng-include