2013-07-03 47 views
1

我想將模板中的內容綁定到Angular應用程序中的數據。該模板被存儲在一個HTML文件和包含綁定表達式:將模板綁定到AngularJS中的數據

<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一起玩。

+0

你能分享你完成的代碼在掠奪者或小提琴 –

+0

添加和鏈接上面的主要文章。 –

回答

1

$ compile(scope)返回對原始dom元素或其克隆的引用,因此您應該將其添加到某個元素。我更新了你的運動員http://plnkr.co/edit/qatH4XNKPxjPyicur67T?p=preview,所以看到它的工作。

+0

謝謝@Ajay,我在簡化的Plunker中闡述了這個問題,並且是一個好的開始。不過,我希望'getTooltip'函數返回綁定的html模板,以便通過綁定到函數名稱本身來注入該內容。我已經更新了我的原始Plunker以顯示我的意思。有什麼辦法強迫Angular綁定數據而不將編譯結果附加到DOM對象上? –

+0

不,你必須做一個指令或手動追加dom元素來進行插值工作 –

+0

奇怪。爲什麼他們會這樣限制它? –

相關問題