angular 带表的指令

Question

我正在尝试将 angular 指令与 table 一起使用，但我没有看到任何数据，当我使用列表时，我可以看到数据并且它工作正常。我也在使用 bootstrap 来设置 table 的样式。我真的不知道我做错了什么，

希望你能有所帮助，以下是我的代码的主要部分：

main.html:

  <table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody ng-repeat="m in users">

        <my-dir my-obj="m"></my-dir>

    </tbody>
</table>

app.js:

var myApp = angular.module('myApp', ['ngRoute'])

myApp.config(function($routeProvider) {

    $routeProvider
        .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'AppCtrl'
    })
 

});

myApp.controller('AppCtrl', function($scope) {
    

    $scope.users = [{name: 'john', age: 16}, {name: 'dani', age: 10}];
    
    
    
});

myApp.directive('myDir', function(){
    return{
        templateUrl: 'directive/mytbl.html',
        replace: false,
        scope:{
            myObj: '='
        }
    }
})

mytbl.html:

<td>{{ myObj.name }}</td>
<td>{{ myObj.age }}</td>

Answer 1

您正在为每个用户创建 <tbody>。

试试改成这样：

<tbody>
   <tr ng-repeat="m in users" my-dir my-obj="m"></tr>
</tbody>

该指令实质上是将其模板附加到指定它的元素（创建该元素的 children）。所以在这种情况下，children 是 .

的那些

angular 带表的指令

angular directive with tables

angular-directive

angular