Question

经过一小时的powergoogle后，我无法想象为什么指令的模板无法编译。

所以这是我的部分视图html :(参见ngRepeat）

<appheader currenttab="currentTab"></appheader>
<div class="l-c-r-panes">
    <div class="l-pane">
        <renters></renters>
    </div>
    <div class="c-pane">
        <div class="form-header" style="position: relative;">
            <input class="form-control filter-above-table" type="text" ng-model="filter.$" custom-search />
            <table ng-table="invoiceGrid" class="table" id="invoice-table">
                <tr ng-repeat="invoice in $data"
                    ng-click="invoiceGridRowClick(invoice, $data)"
                    ng-class="{'active': invoice.$selected}" invoice-info-tooltip="invoice">
                    <td class="invoice-num-column" data-title="'Счет'" sortable="'Invoice'" >{{invoice.Invoice}}</td>
                    <td data-title="'Арендатор'" sortable="'Renter'">{{invoice.Renter}}</td>
                    <td class="invoice-sum-column" data-title="'Сумма по счёту'" sortable="'InvoiceSum'">{{invoice.InvoiceSum}}</td>
                    <td class="invoice-sum-column" data-title="'Оплата (сумма)'" sortable="'PaySum'">{{invoice.PaySum}}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="r-pane">
        <tasks></tasks>
    </div>
</div>

<script type="text/ng-template" id="invoiceTooltipTemplate">
    <div ng-repeat="employee in employees">
        <div>{{employee.Post}}</div>
        <div>{{employee.Name}}</div>
        <div>{{employee.Phone}}</div>
        <div>{{employee.Info}}</div>
    <div>
</script>

那是我的invoiceInfoTooltipDirective：

//require qtip2
angular.module('invoiceModule')
    .directive('invoiceInfoTooltip', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            scope: {
                invoice: '=invoiceInfoTooltip'
            },
            link: function (scope, el, attrs) {
                if (scope.invoice) {
                    var tooltipTitle = scope.invoice.Renter;
                    var tooltipText = '';
                    scope.employees = scope.invoice.RenterInfo.Employees;
                    tooltipText = $compile($('#invoiceTooltipTemplate').html())(scope);
                    el.qtip({
                        overwrite: true,
                        content: {
                            title: tooltipTitle,
                            text: tooltipText
                        },
                        style: {
                            classes: 'qtip-light invoice-qtip c-invoice-table-tooltip'
                        },
                        show: {
                            event: 'click',
                            solo: true
                        },
                        hide: {
                            fixed: true,
                            leave: true,
                            event: null
                        },
                        position: {
                            my: 'top center',
                            target: 'mouse',
                            adjust: {
                                mouse: false
                            }
                        }
                    });
                }
            }
        };
    }]);

指令使用位于局部视图中的模板#invoiceTooltipTemplate

如果此模板没有ngRepate，则$ compile in directive工作正常。但我需要在模板中迭代一些内容并想要使用ngRepeat。

没有控制台错误。什么都没有。

如果temlate没有编译，则返回此jquery obj：

[comment, jquery: "2.1.1", constructor: function, selector: "", toArray: function, get: function…]
0: comment
baseURI: null
childNodes: NodeList[0]
data: " ngRepeat: employee in employees "
firstChild: null
jQuery21106483948081731796: undefined
lastChild: null
length: 33
localName: null
namespaceURI: null
nextElementSibling: div.ng-scope
nextSibling: div.ng-scope
nodeName: "#comment"
nodeType: 8
nodeValue: " ngRepeat: employee in employees "
ownerDocument: document
parentElement: null
parentNode: document-fragment
previousElementSibling: null
previousSibling: null
textContent: " ngRepeat: employee in employees "
__proto__: Comment
length: 1
__proto__: Object[0]

我的项目中有类似的情况，但是没有使用ngRepeat的ngTable指令。它工作正常。

Answer 1

模板始终必须具有根元素。如此轻松的错误，我明白了..

所以模板看起来像这样。它有效。

<script type="text/ng-template" id="invoiceTooltipTemplate">
<div>
    <div ng-repeat="employee in employees">
        <div>{{employee.Post}}</div>
        <div>{{employee.Name}}</div>
        <div>{{employee.Phone}}</div>
        <div>{{employee.Info}}</div>
    </div>
</div>
</script>

$ compile不使用ngRepeat编译指令模板

1 个答案: