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＆amp;在jqLite API中，我们不包含outerHeight()方法。

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

编辑（每次更新的更改）

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

<强> $ includeContentRequested 每次请求ngInclude内容时发出 $ viewContentLoaded 每次重新加载ngView内容时都会发出。 $ stateChangeSuccess 在哈希网址更改发生时调用

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

删除所有活动，例如$viewContentLoaded和所有活动。然后在内部ng-init="switchFitParent()"

的div上添加ng-include="'test.html'"

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

主要-section.html

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

Working Plunkr

希望这可以帮到你。感谢。

如何在角度js中听dom ready事件

1 个答案: