$ compile不能编译指令模板ngRepeat

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指令工作正常。但我需要迭代模板中的一些内容，并且想要使用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]

我在我的项目类似的情况，但没有there`re指令ngTable与ngRepeat。它工作正常。

来源

2014-06-18 k.makarov

模板总是必须有根元素。如此容易的错误，我得到了它..

所以模板看起来像这样。它的工作原理。

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

来源

2014-06-19 07:42:58

$ compile不能编译指令模板ngRepeat

回答

相关问题