使用Angular指令創建佈局

Question

Folks ..我想用一個Angular指令來佈局一串以表格格式的列，但是在寫了一些代碼後我就丟失了。

這是什麼問題？ 我需要顯示一列如pnkr（顯示選項2）所示的列。不過，我想實現這個使用指令。

這裏是plnkr： http://plnkr.co/edit/yTDxfvkCJHwrEDZGQJeX

如果添加模板指令的任何幫助將不勝感激

問候，

Answer 1

，可以輸出相同的標記作爲第一個例子：

demo.directive("customTable",function(){ 
    return ({ 
      restrict : "A",    
      template: '<span ng-repeat="element in header" ng-style="{width: element.width}" class="box">{{element.column}}</span>' 
    }); 
    function link($scope, element, attributes){  
     console.log($scope.header); 
     console.log("now what"); 
    } 
}); 

這一個使用父範圍，所以你不需要標題屬性：

<h1>Display option 2: Use Directive </h1> 
    <div custom-table> 
    </div> 

這裏是一個updated plunker。

您也可以使用隔離範圍和雙向綁定標題。這允許父範圍和指示範圍之間要綁定的頭對象：

demo.directive("customTable",function(){ 
    return ({ 
      restrict : "A", 
      scope: { 
       header = '=' 
      },   
      template: '<span ng-repeat="element in header" ng-style="{width: element.width}" class="box">{{element.column}}</span>' 
    }); 
    function link($scope, element, attributes){  
     console.log($scope.header); 
     console.log("now what"); 
    } 
}); 

然後你可以聲明header爲你做了最初：

<h1>Display option 2: Use Directive </h1> 
    <div custom-table header="header"> 
    </div>