AngularJS의 데이터에 템플릿 바인딩

Question

템플릿의 내용을 각도 어플리케이션의 데이터에 바인딩하고 싶습니다. 템플릿은 HTML 파일에 저장된 결합 식을 포함한다 : 템플릿의 컨텍스트 및 데이터를 제공

<div> 
    <div class="case-header"> 
     <h3>Case Details</h3> 
    </div> 
    <div class="case-body"> 
     <div> 
      <label>Case Number:</label><div>{{item.CaseNumber}}</div> 
     </div> 
     <div> 
      <label>Name:</label><div>{{item.CandidateName}}</div> 
     </div> 
     ... 
    </div> 
</div> 

요소는 NG 격자의 행이다. 아래 함수에서 현재 행의 데이터를 포함 할 새 범위를 만듭니다. 템플리트의 내용은 html 파일에서 검색되고 제어기가 구성 될 때 특성에 캐시됩니다. 그러나 $ compile 호출은 원하는대로 데이터를 바인딩하지 않습니다. 이 함수는 여전히 바인딩 표현식이있는 템플릿 마크 업을 반환합니다. 나는 두 가지 스타일의 바인딩 표현을 시도했다. $에 대한 호출은 컴파일

$scope.getTooltip = function (row) { 
     var scope = $scope.$new(); 
     scope.item = row.entity; 
     var elem = angular.element($scope.template); 
     var result = $compile(elem)(scope); 
     return result.html(); 
    }; 

는 documentation대로 힘 올바른 것으로 보인다,하지만 난 내가 뭔가를 잘못 이해해야합니다 같아요.

템플릿에 데이터 값을 어떻게 주입합니까?

Plunker

여기에 재생하는 Plunker입니다.

Answer 1

$ compile (scope)은 원래 dom 요소 또는 clone에 대한 참조를 반환하므로 일부 요소에 추가해야합니다. 플 런커를 업데이트했습니다. http://plnkr.co/edit/qatH4XNKPxjPyicur67T?p=preview 그래서 작동하는지 확인하십시오.