2014-06-18 1 views
0

한 시간이 지나면 나는 지시문의 템플릿이 컴파일되지 않는 것을 상상할 수 없습니다.

그래서이 내 부분보기의 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 지시문이 제대로 작동합니다. 하지만 템플릿의 일부 내용을 반복해야하고 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 ngRepeat 아니 ngTable 지시자. 그리고 그것은 잘 작동합니다.

답변

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> 
관련 문제