Creating layout using Angular directives - angularjs

Question

Folks.. i am trying to layout a bunch of columns in tablular format using Angular directive but am lost after having written some code.
What's the issue?
I need to display a bunch of columns as shown in the plnkr (Display option 2). However I want to achieve this using directives.
Here is the plnkr:
http://plnkr.co/edit/yTDxfvkCJHwrEDZGQJeX
Any help will be appreciated
regards,

Answer 1

If you add a template to the directive, you can output the same markup as your first example:
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");
}
});
This one uses the parent scope so you don't need the header attribute:
<h1>Display option 2: Use Directive </h1>
<div custom-table>
</div>
Here is an updated plunker.
You could also use Isolated Scope and two-way bind the header. This allows the header object to be bound between the parent scope and the directive scope:
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");
}
});
And then you can declare header as you did originally:
<h1>Display option 2: Use Directive </h1>
<div custom-table header="header">
</div>