如何監聽角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

回答

相關問題