$document.ready() on directive template?

Question

I have a directive that returns a template that does not appear to be sizing itself as it should. Elements in the template have their height set to 100%, however, it seems the parent's height (outside the directive) is not being set quick enough (also from 0 to 100%).

I do not have an issue if I refresh the page, this only comes up when resizing the window.

Example: http://codepen.io/sweatherly/pen/rLYPvE (decrease the window size, then refresh to see)

Please note the the example does not use a directive, just highlights the problem.

(function() {
"use strict";
angular
    .module("ngApp")
    .directive("currentCard", function() {
        return {
            templateUrl: 'components/orders/current/current-card.tpl.html',
            scope: {
                orders:     "=",
                cardTitle:  "@cardTitle"
            }
        }
    });
})();

Is it possible to somehow use $document.ready() on/with the template? Edit: It turned out to be a stupid CSS issue (targeting wrong element), but I know understand a bit about directive's link function.

You can use link function – Gangadhar Jannu Jul 15 '16 at 04:00 — Gangadhar Jannu, Jul 15 '16 at 04:00

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

You can use link function which will be executed after the template is loaded.

Usually any DOM manipulation, adding/removing event handlers should be done in link function.

Please refer difference between compile and link function .

edited May 23 '17 at 12:06

Community

1
1

answered Jul 15 '16 at 04:09

Gangadhar Jannu

4,136
6
29
49

It turned out to be a different issue, but thanks for the compile/link explanation. – sweatherly Jul 15 '16 at 17:37

score 1 · Answer 2 · answered Jul 15 '16 at 04:14

1

You can simply use the link function...

Link is a built in feature for directive, this function is executed when the directive is loaded or appears in the parent template.

Reference here ; example here

(function() {
"use strict";
angular
    .module("ngApp")
    .directive("currentCard", function() {
        return {
            templateUrl: 'components/orders/current/current-card.tpl.html',
            scope: {
                orders:     "=",
                cardTitle:  "@cardTitle"
            },
            link: function(){
               console.log("ready")
            }
        }
    });
 })();

answered Jul 15 '16 at 04:14

Alvaro Silvino

9,441
12
52
80

Is the solution to modify the elements where `height: 0px`, changing them to `height: 100%` from inside the link function? Or is there a way to call or rerender the template from link? – sweatherly Jul 15 '16 at 16:42
The template will automatically render when the link is called. The link is called when the directive is exposed to the user @sweatherly – Alvaro Silvino Jul 15 '16 at 17:18
It turned out to be a different (CSS) issue, but thanks for the explanation. – sweatherly Jul 15 '16 at 17:37

$document.ready() on directive template?

2 Answers2