如何监听角JS

到DOM已准备就绪事件这是我的例子如何监听角JS

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，但还是不行。

请帮助我，谢谢。

来源

2015-02-12 miterfrants

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

您需要包括jQuery文件的Plunkr内部做工精细

编辑（问题每次更新变化）

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

$ includeContentRequested 发出的每一道的ngInclude内容请求 时间$ viewContentLoaded发出的每一道的ngView内容被重新装载时间。 $ stateChangeSuccess时调用哈希网址发生变化

所有的上述三个不告诉我们这一观点被渲染的UI与否。

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

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

主section.html

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

Working Plunkr

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

来源

2015-02-12 06:35:56

感谢您的回复。我忘了在[plunker]中包含jquery lib（http://plnkr.co/edit/Foc5vEa5HJ0Uz1fGZXtS?p=preview）。我更新我的代码在笨蛋。我认为我的问题是如何在dom准备好之后做些什么，当我有两个级别的ng-include时。再次感谢你。 – miterfrants 2015-02-12 08:03:06

@miterfrants答案补充请check.does按预期工作？ – 2015-02-12 12:44:50

@ pankajpakar再次感谢您。如果我有很多ng-include，我必须在每个地方添加ng-init？没有懒惰的解决方案吗？ – miterfrants 2015-02-12 18:11:41

回答

相关问题