Блог

После часа работы с 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>
  

И это мой invoiceinfotooltipдирективный:

 //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 в директиве работает нормально. Но мне нужно выполнить итерацию некоторого содержимого в шаблоне, и я хочу использовать ngRepeat.

Ошибок консоли нет. Ничего.

Если temlate не компилирует его, верните этот объект jquery:

 [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. И это работает нормально.

Шаблон всегда должен иметь корневой элемент. Такая простая ошибка, и я ее получил..

Итак, шаблон выглядит следующим образом. И это работает.

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