角指令表行问题 [英] Angular Directive table rows issue

问题描述

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

I am a beginner Angular programmer, but I am really close to understanding the directives.

我这里创建小提琴，但我从来没有使用过小提琴，而且这是不太渲染...

I create a fiddle here, but I have never used fiddle before, and it is not quite rendering ...

在TR-行是一个指令。我通过数据试图循环，并打印每个记录的指令（行）。
HTML：

the tr-row is a directive. I am trying to loop through the data, and print a directive (row) per record. 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的：

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: "="
    }
};
});

应该很容易。 （LE叹气）

should be easy. (le sigh)

任何帮助将是AP preciated，我真的需要明白这一点。

any help would be appreciated, I REALLY need to understand this.

在什么我的code正在发生的事情是TR-行指令已更换表。我让他们的名单，
（用TR-行元素的TR内，但没有表，我知道这意味着我靠近，以显示他们，但我想不出任何新的组合来试试。

What is happening in my code is the tr-row directive has replace the table. I get a list of them, (with a tr INSIDE of a tr-row element but there is no table to display them in. I know this means I am close, but I cant think of any new combinations to try.

我只需要排一个简单的表在里面。

I just need a simple table with rows in it.

我appologise如果这已经被问了一百万次，我似乎不确定该怎么寻找。我已经尝试了这么多东西。

I appologise if this has been asked a million times, I seem to be unsure what to search for. I have tried so many things.

推荐答案

首先，标签名称不能包含破折号字符。所以你不能用 TR-行作为标签的名字，但你可以使用它作为属性。

Firstly, a tag name can't contain dash char. So you can't use tr-row as tag name, but you can use it as attribute.

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

Then, you can simply write a directive like that:

.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/

这篇关于角指令表行问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！