Question

我已经为Angular JS中的表创建了一个自定义指令，它代表了这个

   `<div mytable api="data">
        <div col="A"></div>
        <div col="B"></div>
    </levelOne>`

myTable指令有一个与之关联的templateUrl，它有表和分页选项。现在我有列名的硬编码。但我希望我的列名称col = A和col = B在父指令mytable中。问题是mytable被templateUrl取代，我无法获得内部元素。

Answer 1

我不明白你想要实现的是什么，但想提供一个你可以建立起来的解决方案。

声明你的指令（注意带连字符的元素名称）：

<div mytable api="data">
    <div col="ID"></div>
    <div col="NAME"></div>
</div>

现在将指令mytable定义为：

var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope) {
    $rootScope.data = [{
        id: 1,
        name: 'One'
    }, {
        id: 2,
        name: 'Two'
    }];
});
myApp.directive('mytable', function() {
    return {
        restrict: 'AE',
        transclude: true,
        template: 
            '<table>\
                <thead></thead>\
                <tbody>\
                    <tr ng-repeat="d in data">\
                        <td ng-bind="d.id"></td>\
                        <td ng-bind="d.name"></td>\
                    </tr>\
                </tbody>\
            </table>',
        controller: function($scope, $element, $attrs) {
            $scope.data = $scope.$eval($attrs.api);
        },
        link: function(scope, element, attrs, NullController, $transcludeFn) {
            $transcludeFn(function(tElement) {
                var headHTML = '<tr>';
                for (var i = 0; i < tElement.length; i++) {
                    if (tElement[i].nodeType === 1) {
                        headHTML+= '<td>' + angular.element(tElement[i]).attr('col') + '</td>';
                    }
                }
                headHTML+= '</tr>';
                element.find('thead').html(headHTML);
            });
        }
    };
});

新演示：http://jsfiddle.net/codef0rmer/aa18tuzf/

Old Demo：http://jsfiddle.net/codef0rmer/yy4rc49L/

如何将div的内容转换为表头？

1 个答案: