angularjs - $compile does not compile directive template with ngRepeat -

angularjs - $compile does not compile directive template with ngRepeat -

after hr of powergoogle can not imagine why directive`s template not compile.

so partial view html: (see 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>

and invoiceinfotooltipdirective:

//require qtip2 angular.module('invoicemodule') .directive('invoiceinfotooltip', ['$compile', function ($compile) { homecoming { 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 } } }); } } }; }]);

directive utilize template #invoicetooltiptemplate located in partial view

if template not have ngrepate, $compile in directive works fine. need iterate content in template , want utilize ngrepeat.

no console errors. nothing.

if temlate not compile homecoming 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]

i had similar situation in project, there`re no ngtable directive ngrepeat. , works fine.

template must have root element. easy error , got it..

so template looks this. , works.

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

angularjs angularjs-directive angularjs-ng-repeat