Question

Folks ..我正在尝试使用Angular指令以tablular格式布局一堆列，但在编写了一些代码后丢失了。

问题是什么？我需要显示一堆列，如plnkr所示（显示选项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");
    }
 });

这个使用父作用域，因此您不需要header属性：

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

这是updated plunker。

您还可以使用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>

使用Angular指令创建布局

1 个答案: