2

This is my example

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; })

I want to make main-section block height fit parent but it not work....

I try to bind $viewContentLoaded, $stateChangeSuccess, $includeContentLoaded, but still not work.

Please help me, thanks.

Improve this question

1 Answer 1

Reset to default
1

Your code is totally right. And It is failing at el.outerHeight() function. The reason behind it is Angular internally uses lighter version of jQuery ehich is nothing but jqLite API & In jqLite API doesn't contain the outerHeight() method.

You need to include jQuery file inside your Plunkr will work fine

EDIT(Changes per update in question)

As you mention in your question functionality of all three events is given below.

$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

All of above three don't tell us that view is rendered on UI or not.

Remove all events like $viewContentLoaded and all. Then add ng-init="switchFitParent()" on the div of your inner ng-include="'test.html'"

ng-init will call on rendering of that div which contains ng-include direcitve and then the method of switchFitParent() method will set/remove class.

main-section.html

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

Working Plunkr

Hope this could help you. Thanks.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for your reply. I forgot to include jquery lib in plunker. I update my code in plunker. I think my problem is how to do some stuff after dom ready when I have two level ng-include. Thank you again.
@miterfrants Answer added please check.does it working as expected?
@pankajpakar Thank you again. If I have a lot of ng-include I have to add ng-init every where right? No lazy solution for it?
yeah..in your case It is..but there may be the case sometimes, you may need to use $timeout(function(){//your code}); $timeout gets call exactly next to the current digest cycle completion

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.