第一个角度指令：静态表答案

【问题标题】：First angular directive: static table第一个角度指令：静态表
【发布时间】：2016-04-18 14:19:45
【问题描述】：

绕着圈子跑，我似乎无法将我需要在这里做的事情拼凑起来。

我想写一个语法如下的指令：

<my-table data="(some json)">
    <my-column binding="json.property" header="Name" />
</mytable>

没什么特别的（但我必须先克服这个困难）。接收一个 JSON 字符串，根据子指令创建一个表。谁能拼凑一个简单的例子让我跑起来？

谢谢！

【问题讨论】：

为什么要为此使用指令？您可以创建一个接收 JSON 字符串的服务，然后返回“表格格式”数据，您可以从中构造 HTML 表格。
另外，“基于子指令创建表”是什么意思？这需要更多解释。
其实一个指令就可以了。特别是在数据重复的情况下。
是的，仅此一项指令将是矫枉过正，但我计划添加更多内容。我只是想不让问题超载。基本上我想用 data 属性创建一个表，但是使用子元素“my-column”来定义列和标题。

标签： angularjs angularjs-directive

【解决方案1】：

如果你想建立一个简单的表，这样的东西应该足以让你开始：

https://jsfiddle.net/edbrepzu/

角度：

// controller
function Controller($location) {
  var vm = this;
  vm.data = [
    {band: 'Led Zeppelin',id: 1},
    {band: 'The Pixies',id: 2},
    {band: 'Beck',id: 3}
  ];
}

// directive
function myTable() {
   var directive = {
      restrict: 'E',
      template: '<table><tr ng-repeat="d in data"><td>{{d.band}}</td><td>{{d.id}}</td></tr></table>',
      scope: {
         data: '='
      }
   };

   return directive;
}

HTML：

<my-table data="ctrl.data"></my-table>

就我个人而言，我更喜欢 templateUrl 而不是指令中的模板，因为当 html 代码变重时，模板 url 会更简洁一些。

【讨论】：

谢谢罗伯。我同意 templateUrl 的用法。不过，我也希望能够定义表头，理想情况下是在我的示例中使用“my-column”元素。那里有什么指导吗？
您知道要使用的标题名称还是动态的？
它们将被编码到 HTML 中，而不是在运行时生成。但是每个实例它们会有所不同。

【解决方案2】：

我强烈建议您查看此网站：

http://www.sitepoint.com/practical-guide-angularjs-directives/

当我开始使用 AngularJS 时，它对我帮助很大，应该提供足够的说明。

【讨论】：