Question

我有一个指令，它返回一个看起来不应该调整自身大小的模板。模板中的元素的高度设置为100％，但是，父项的高度（指令之外）似乎没有设置得足够快（也是0到100％）。

如果我刷新页面，则没有问题，只有在调整窗口大小时才会出现此问题。

示例： http://codepen.io/sweatherly/pen/rLYPvE（缩小窗口大小，然后刷新以查看）

请注意，该示例不使用指令，只是突出显示问题。

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

是否有可能以某种方式在模板上使用$document.ready()？ 编辑：原来这是一个愚蠢的CSS问题（针对错误的元素），但我知道对指令的链接功能有所了解。

Answer 1

您可以使用link函数，该函数将在加载模板后执行。

通常任何DOM操作，添加/删除事件处理程序都应该在链接函数中完成。

请参阅difference between compile and link function。

Answer 2

您只需使用链接功能...

链接是指令的内置功能，当指令加载或出现在父模板中时执行此功能。

参考here;例如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")
            }
        }
    });
 })();

$ document.ready（）在指令模板上？

2 个答案: