这是我的示例
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
希望这能对你有所帮助。谢谢