16

我是一个初学者 Angular 程序员，但我真的很接近理解指令。

我在这里创建了一个小提琴，但我以前从未使用过小提琴，而且它不是很渲染......

tr-row 是一个指令。我正在尝试遍历数据，并为每条记录打印一个指令（行）。HTML： 

<table ng-controller="fiddleCtrl">
   <thead>
      <th>id</th>
      <th>name</th>
      <th>description</th>
  </thead>
  <tbody>
    <tr><tr-row ng-repeat="d in data" scdata="d"></tr-row></tr>
  </tbody>
</table>

javascript: 

var myapp = angular.module('myApp', [])
.controller('fiddleCtrl', ['$scope', function ($scope) {

$scope.data = [
     { id: 1, name: 'Fred',   description: 'not the best worker' }, 
     { id: 2, name: 'Wilma',  description: 'Freds Wife'}, 
     { id: 3, name: 'Barney', description: 'Freds best friend'}, 
     { id: 4, name: 'Louise', description: 'Never heard of Fred'}, 
     { id: 5, name: 'Tracy',  description: 'Some Chick'}, 
     { id: 6, name: 'Foo',    description: 'Inventer of bar'}
];
}]).directive('trRow', function ($compile) {
return {
    restrict: "E",
    replace: true,
    link: function (scope, element, attrs) {
        scope.id = scope.d.id;
        scope.name = scope.d.name;
        scope.desc = scope.d.description;

        var tmpl = '<tr  ><td>{{id}}</td><td><strong>{{name}}</strong></td><td>{{desc}}</td></tr>';
        element.html(tmpl).show();
        //var e =$compile(tmpl)(scope);
        //element.replaceWith(e);
        var e = $compile(element.contents())(scope);
    },
    scope: {
        d: "="
    }
};
});

应该很容易。（叹气）

任何帮助将不胜感激，我真的需要了解这一点。

我的代码中发生的是 tr-row 指令替换了表格。我得到了它们的列表，（带有 tr INSIDE 的 tr-row 元素，但没有表格可以显示它们。我知道这意味着我很接近，但我想不出任何新的组合可以尝试。

我只需要一个包含行的简单表格。

如果这被问了一百万次，我很抱歉，我似乎不确定要搜索什么。我已经尝试了很多东西。

4

2 回答 2

40

首先，标签名称不能包含短划线字符。所以你不能tr-row用作标签名称，但你可以将它用作属性。

然后，您可以简单地编写这样的指令：

.directive('trRow', function () {

    return {
        template: '<tr><td ng-bind="row.id"></td><td><strong ng-bind="row.name"></strong></td><td ng-bind="row.description"></td></tr>'
    };
});

用法是这样的：

<tbody>
    <tr tr-row ng-repeat="row in data"></tr>
</tbody>

小提琴中的一个工作示例：http: //jsfiddle.net/T7k83/85/

于 2013-09-01T16:58:28.203 回答
17

实际上这个问题是特定于<table>元素的。

浏览器解析引擎不喜欢内部的无效标签，<table>因此它们会在您的指令有机会用有效元素替换自己之前尝试将您的指令从表中抛出（您可以通过检查元素看到这一点）。即使您的指令名称中不包含破折号，这也适用。

解决这个问题的方法是使用指令 typeA而不是 type E，这是 @MuratCorlu 建议的。

对于其他元素，例如<div>，您几乎可以将其替换为名称包含破折号的自定义标签。例如ng-repeat可以用作标签。

于 2016-10-27T04:41:49.100 回答