1

I am trying to set the element's css property top base on it's height. To do it I create a directive like this:

directive('errormsgbox', function($timeout) {
    return {
        restrict: 'EA',
        scope: false,
        replace:true,
        templateUrl: 'submitter/reports/errormsgbox.html',
        link: function(scope,element) {
            $timeout(function(){
                    $timeout(function(){
                        console.log(element[0].offsetHeight);   

                },2000);
            },2000)    
        }
    };
})

Directive Html:

<span ng-if='expenses.hasBlockers || expenses.hasWarnigs' style='border:1px solid gray' ng-show='policyViolation && showpencil' class='msgbox'>
    <ul>
        <li ng-repeat='policymsg in expenses.policyMsg'>
            <span class='floatleft' ng-class="showPolicyClass(policymsg.type)">{{policymsg.type}} - </span><span style='width:285px;' class='floatleft'>{{policymsg.message}}</span>
            <div class='clear'></div>
        </li>
    </ul>
</span>

Main Html:

<td class="text-center" style='position:relative'>
    <errormsgbox></errormsgbox>
</td>// it is in a table cell, the content of directive is from ng-repeat in this table

I need to access <span>.but as you can see, directive works fine it will show the correct info, but every time it will log undefined for element height. any idea How can I access this?

Improve this question

2 Answers 2

Reset to default
1

For E directives such as <my-dir></my-dir> the default display value will set to inline. You can do a few things here, either leverage block elements with replace: true or simply set a style rule, in this example, my-dir { display: block }. You could even call elem.css('display', 'block') in your directive link function.

JSFiddle Example - simplified demo

Keep in mind float rules along with inline-block will take margins and padding into consideration for examining offsetHeight

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

14 Comments

In your example, yes, it works, but if I loop data into li with ng-repeat in your example, it gives me 0, I think the link function get run before the data loops in, that is why there are no content in the directive. which returns 0 as height.
ah okay, just wrap it in a $timeout then. I didn't include it in my fiddle example
yah it works in your example,but as you can see, I did try to wrap them with timeout in my code, but it returns undefined....it drives me crazy...
did you add the display rule in your code e.g. errormsgbox { display: block }?
also which browser are you using?
|
1

Right click on the page that has the directive you want to access and click 'Inspect Element', then enter:

angular.element($0).scope()

in your developer console. This lets you access all the data in your angular scope. This will help debug the data that angular is using. But, in more direct answer to your question, I have done something similar where I set css properties inside a directive. It would turn your code into something like this:

return {
    restrict: 'EA',
    scope: false,
    replace:true,
    templateUrl: 'submitter/reports/errormsgbox.html',
    link: function(scope,element,attr) {
        element.css({
                    width: '360px',
                    height: '640px',
                    position: 'absolute',
                    top: '0px',
                    left: '0px',
                    background: '#FFF'
                }); 
    }
};
Improve this answer

1 Comment

cool feature indeed, but this does not necessarily answer the question

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.