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

我有一个指令返回一个模板，它看起来并不像应该那样大小。模板中的元素将其高度设置为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问题（定位错误的元素），但我知道了解一些关于指令的链接函数。

来源

2016-07-15 sweatherly

您可以使用链接功能 –

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

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

请参考difference between compile and link function。

来源

2016-07-15 04:09:11

它原来是一个不同的问题，但由于在编译/链接的解释。 – sweatherly

你可以简单的使用链接功能...

链接是一个内置的功能为指令，当该指令被加载或出现在父模板执行此功能。

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

来源

2016-07-15 04:14:12

解决方案是修改“height：0px”中的元素，将它们从链接函数中更改为“height：100％”？或者有没有办法从链接调用或重新提交模板？ – sweatherly

当链接被调用时，模板将自动呈现。当指令暴露给用户时，链接被调用@sweatherly –

原来是一个不同的（CSS）问题，但感谢解释。 – sweatherly

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

回答

相关问题