Question

我正在整理一个指令，它将包装一个被转换的表，并将与另一个指令一起使用，以将复选框添加到表行中的第一个单元格，以允许多行选择，以及用于切换选择\的标题复选框单元格取消选择所有功能。

我已经开始使用表头指令，这是我到目前为止所提出的：

指令

angular
    .module('app.components')
    .directive('myTable', myTable);

function myTable() {
    var myTable = {
        restrict: 'E',
        transclude: true,
        scope: {
            someProperty: '='
        },
        template: '<div class="myTable">' +
                                '<md-toolbar class="md-menu-toolbar">' +
                                    '<div class="md-toolbar-tools">' +
                                        'OTHER CONTENT HERE...'
                                    '</div>' +
                                '</md-toolbar>' +
                                '<ng-transclude></ng-transclude>' +
                            '</div>',
        controller: controller,
        controllerAs: 'vm',
        bindToController: true
    };

    return myTable;

    function controller($attrs) {
        var self = this;
        self.enableMultiSelect = $attrs.multiple === '';
    }
}

angular
    .module('app.components')
    .directive('myTableHead', myTableHead);

myTableHead.$inject = ['$compile'];

function myTableHead($compile) {
    var myTableHead = {
        restrict: 'A',
        require: ['myTableHead', '^^myTable'],
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
        link: link
    };

    return myTableHead;

    function link(scope, element, attrs, ctrls) {

        var self = ctrls.shift(),
            tableCtrl = ctrls.shift();

        if(tableCtrl.enableMultiSelect){
            element.children().prepend(createCheckbox());
        }

        self.toggleAll = function () {
            console.log('toggleAll');
        };

        function createCheckbox() {
            var checkbox = angular.element('<md-checkbox>').attr({
                'aria-label': 'Select All',
                'ng-click': 'vm.toggleAll()'
            });

            return angular.element('<th class="md-column md-checkbox-column">').append($compile(checkbox)(scope));
        }
    }

    function controller() {

    }
}

HTML

<my-table multiple>
    <table>
        <thead my-table-head>
            <tr>
                <th></th>
                <th></th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="thing in things">
                <td>{{thing.propA}}</td>
                <td>{{thing.propB}}</td>
            </tr>
        </tbody>
    </table>
</my-table>

我遇到的问题是，只要我将my-table-head指令添加到被转换的表的thead元素中，就不会呈现ng-repeat中的行。

复选框标题单元格实际上渲染得很好，但我也发现在单击它时，它所绑定的（在我的链接函数中定义）的toggleAll函数没有触发，因为我没有看到任何控制台日志消息出现。

我无法弄清楚为什么，任何人都可以指出我上面的做法我做错了吗？

自定义表头指令的行为不符合预期

0 个答案: