AngularJS 不得不瞭解的服務 $compile 用於動態顯示html內容
阿新 • • 發佈:2019-02-13
專案中一度糾結與AngularJS如何動態顯示不同的html內容。
本來是希望直接使用下面的語句來實現:
1 | <div> </div> |
但是很尷尬的是,這樣不能識別出html標籤,而是直接將html裡的頁面標籤全都顯示出來了。這當然不是我想要的效果。
谷哥了一番,沒想到在官網上就找到了我想要實現的效果,而實現的主角就是今天的 $compile 服務。
節選一下關鍵部分內容,Javascript:
1234567891011121314151617181920212223242526272829303132 |
<script> angular.module('compileExample' |
Html:
12345 | <div ng-controller="GreeterController"> <input ng-model="name"> <br> <textarea ng-model="html"></textarea> <br> <div compile="html"></div></div> |
總之就是用$compile服務建立一個directive ‘compile’,這個complie會將傳入的html字串或者DOM轉換為一個template,然後直接在html裡呼叫compile即可。
我基本就是直接copy過來就可以用了,各位看官自便咯~