$編譯不編譯html字符串 - angularjs

我想編譯一些原始的html與角度指令的屬性超過範圍，但它不按預期工作。這是我在控制檯中的斷點上運行的簡單代碼的快照。

$scope.scopeString = "scope string value"; 

"scope string value" 


$scope.scopeArray = [1,2,3] 

(3) [1, 2, 3] 


$compile(`<div>{{scopeString}}</div>`)($scope).prop('outerHTML') 

"<div class="ng-binding ng-scope">{{scopeString}}</div>" 


$compile(`<div><div ng-repeat="item in scopeArray">{{item}}</div></div>`)($scope).prop('outerHTML') 

"<div class="ng-scope"><!-- ngRepeat: item in scopeArray --></div>"

誰能告訴我究竟做錯了什麼？

來源

2017-08-24 pranavjindal999

什麼的「$編譯的解譯（'

'）（$ scope）.prop（'outerHTML'）'？ –

你可以添加更多的信息，但不清楚 –

範圍綁定是根據摘要循環計算的。立即從元素中檢索HTML並不會讓它有機會插入綁定。

當執行代碼內消化週期（如控制器），它可以是

var $el = $compile(`<div>{{scopeString}}</div>`)($scope); 
$timeout(() => { 
    console.log($el.prop('outerHTML')) 
});

當外執行的消化，這是

var $el = $compile(`<div>{{scopeString}}</div>`)($scope); 
$scope.$apply(); 
console.log($el.prop('outerHTML'))

來源

2017-08-24 11:36:08 estus

我在現有的摘要週期即控制器中執行此操作，但我不明白爲什麼必須讓當前週期完成以獲取編譯後的html。我在文檔中也找不到解釋。 – pranavjindal999

由於表達式將在當前摘要期間的某個時間點計算，但您需要等到這一刻。這也可以用$$ postDigest鉤子來完成（$$表示它沒有記錄，你應該知道你在做什麼）：'$ scope。$$ postDigest（（）=> {console.log（ $ el.prop（'outerHTML'））}）' – estus

$ compile definition- ''將一個HTML字符串或DOM編譯成一個模板並生成一個模板函數，然後可以用它來將範圍和模板鏈接在一起。 ''' 我以爲在使用範圍調用時由$ compile返回的模板函數會返回最終編譯的html。至少這個定義似乎暗示了這一點。反正非常感謝您的幫助！ – pranavjindal999

$編譯不編譯html字符串 - angularjs

回答

相關問題