Folks ..我正在尝试使用Angular指令以tablular格式布局一堆列,但在编写了一些代码后丢失了。
问题是什么? 我需要显示一堆列,如plnkr所示(显示选项2)。但是我想用指令实现这个目的。
这是plnkr: http://plnkr.co/edit/yTDxfvkCJHwrEDZGQJeX
任何帮助将不胜感激
的问候,
答案 0 :(得分:0)
如果向指令添加模板,则可以输出与第一个示例相同的标记:
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");
}
});
这个使用父作用域,因此您不需要header属性:
<h1>Display option 2: Use Directive </h1>
<div custom-table>
</div>
您还可以使用Isolated 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");
}
});
然后你可以像原来那样声明header
:
<h1>Display option 2: Use Directive </h1>
<div custom-table header="header">
</div>