$ 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（）在指令模板上？

回答

相關問題