https://segmentfault.com/a/1190000003712937
我們以下使用的angular
的版本是1.3.x，完整的代碼在文章的最后面，在線的例子demo注意，我下面給出的代碼示例只是截取了一部分挨决，完整的部分在文章的最后面盒发。
1.首先我們最常使用的一個(gè)綁定表達(dá)式的指令是ngBind
兔沃，比如在一個(gè)div
標(biāo)簽中我們可以這樣使用：
<div ng-bind="vm.info"></div>
這樣就把控制器中的vm.info
的值綁定到這個(gè)div
標(biāo)簽里面了，使用這個(gè)指令還有一個(gè)好處就是在頁(yè)面還沒(méi)有完全渲染好的情況下卵沉，是不會(huì)出現(xiàn)Angular的{{}}
解析符號(hào)的颠锉，它隱藏了Angular解析表達(dá)式的過(guò)程。如果你使用了下面的方法史汗，
<div>{{vm.info}}</div>
在網(wǎng)速不是很好的情況下琼掠，就會(huì)出現(xiàn){{}}
解析符號(hào)，給用戶帶來(lái)不好的體驗(yàn)停撞。
2.下一個(gè)綁定表達(dá)式的指令就是ngBindTemplate
了瓷蛙，這個(gè)指令與上一個(gè)指令的最大不同之處是：ngBindTemplate
可以綁定多個(gè)表達(dá)式，這樣就有一個(gè)好處戈毒，在一些元素中艰猬，比如title
和option
是不可以包含sapn
元素的，這時(shí)候如果需要多個(gè)變量的話埋市，ngBindTemplate
就是很必須的冠桃。
<div ng-bind-template="{{vm.info}} {{vm.msg}}"></div>
還要注意一點(diǎn)就是，這個(gè)指令的用法道宅，多個(gè)模型變量是用{{}}
括起來(lái)的食听。
3.接下來(lái)的一些是關(guān)于模板的綁定胸蛛，第一個(gè)比較常用的是ngBindHtml
，從指令的名字就可以看出來(lái)樱报，這個(gè)指令是綁定一段html
的葬项，那么這個(gè)指令該如何使用呢？我們來(lái)研究一下肃弟，首先玷室，我們需要在控制器定義一段html
代碼，如下所示：
vm.html = '<div class="container">\ <div class="title">{{vm.info}}</div>\ <div class="content">content</div>\ </div>';
然后我們就會(huì)很自然地想到按照下面的方法去使用這個(gè)指令：
<div ng-bind-html="vm.html"></div>
但是當(dāng)你在瀏覽器上運(yùn)行的時(shí)候笤受，卻發(fā)現(xiàn)瀏覽器給你報(bào)了一個(gè)錯(cuò)誤穷缤，如下所示：
說(shuō)你在一個(gè)安全的上下文中使用了不安全的值，怎么解決這個(gè)問(wèn)題呢箩兽？我們可以手動(dòng)的將我們定義的那段html
代碼津肛，變成Angular信任的值，具體的方法是在控制器定義一個(gè)方法如下所示：
function trust_my_html(str){ return $sce.trustAsHtml(str); }
然后在html
中可以這樣使用：
<div ng-bind-html="vm.trust_my_html(vm.html)"></div>
4.上面的方法在一定程度上解決了模板的綁定問(wèn)題汗贫，但是身坐，還有一個(gè)小問(wèn)題，就是模板中的表達(dá)式并沒(méi)有被解析落包，你可以看看我寫的那個(gè)demo部蛇，所以要想解決這個(gè)問(wèn)題，就是有兩個(gè)辦法咐蝇，首先就是你自己寫一個(gè)指令涯鲁，當(dāng)綁定模板的時(shí)候，將模板中的表達(dá)式也給解析了有序，第二個(gè)辦法就是使用別人的插件抹腿，我看到一個(gè)比較好的插件，名字叫做angular-bind-html-compile
旭寿，我們?cè)谖覀兊闹髂K中注入這個(gè)依賴就可以使用這個(gè)指令了警绩，使用方法如下：
<div bind-html-compile="vm.html"></div>
這樣一來(lái)，我們模塊中的表達(dá)式也可以被解析了盅称。還有需要注意肩祥，使用這個(gè)指令就不需要我們手動(dòng)的將那段html
片段變成Angular信任的值了。
5.當(dāng)我們仔細(xì)看了看上面所說(shuō)的那個(gè)指令缩膝，發(fā)現(xiàn)也不是那么的難，還不如我們自己寫一個(gè)呢逞盆，不然還要引入他的文件松申，太費(fèi)事了俯逾，具體的代碼如下：
function compileBindHtml($compile){ var directive = { restrict: 'AE', link:linkFunc }; return directive; function linkFunc(scope, elements, attrs){ var func = function(){ return scope.$eval(attrs.compileBindHtml); }; scope.$watch(func, function(newValue){ elements.html(newValue); $compile(elements.contents())(scope); }) } }
我們來(lái)看看這個(gè)指令舅逸，在鏈接函數(shù)中，我們使用$watch
監(jiān)測(cè)func
函數(shù)的返回值琉历，func
函數(shù)的返回值是一個(gè)被$eval
的屬性值，也就是我們的模板值旗笔，然后當(dāng)檢測(cè)到有變化的時(shí)候，就將我們的模板值放置到含有這個(gè)指令的html
標(biāo)簽中蝇恶，然后在使用$compile
服務(wù)將我們的模板給編譯了〈榛。看看其實(shí)也不是那么難的。
6.最后一個(gè)可以用來(lái)綁定模板的指令是ngInclude
贿衍，這個(gè)指令使用的頻率相對(duì)來(lái)說(shuō)比較高一點(diǎn)，那么這個(gè)指令怎么使用呢贸辈？我們一起來(lái)研究一下。
方法一裙椭，將模板寫在html
文件中躏哩，這個(gè)過(guò)程要通過(guò)使用script
指令來(lái)實(shí)現(xiàn)，如下所示的一個(gè)例子：
<script type="text/ng-template" id="template-1"> <div class="container"> <div class="title">{{vm.info}}</div> <div class="content">content</div> </div> </script>
這里來(lái)講解一下怎么使用這個(gè)script
指令揉燃，首先它的type
屬性值必須是ng-template
扫尺，然后id
值是它的一個(gè)標(biāo)記或者索引，當(dāng)你需要在html
中使用它的時(shí)候就要使用這個(gè)id
的值來(lái)引用這段模板炊汤。
方法二正驻，將模板寫在js
文件中，通過(guò)使用$templateCache
服務(wù)抢腐，來(lái)寫我們的模板姑曙，具體的用法如下：
function configFuc($templateCache){ var template = '<div class="container">\ <div class="title">{{vm.info}}</div>\ <div class="content">content</div>\ </div>'; $templateCache.put('template-2', template); }
我們的模板的索引是template-2
，具體的內(nèi)容就是template
變量里面的內(nèi)容迈倍。
在html
里面使用的方法如下所示：
<div ng-include="'template-1'"></div> <div ng-include="'template-2'"></div>
使用ngInclude
的另一個(gè)好處就是模板里面的表達(dá)式是會(huì)被解析的伤靠。
完整的代碼：
index.html
<body ng-controller="MyController as vm"> <script type="text/ng-template" id="template-1"> <div class="container"> <div class="title">{{vm.info}}</div> <div class="content">content</div> </div> </script> <h1 class="title">ngInclude <span>VS</span> ngBindHtml <span>VS</span> ngBind <span>VS</span> ngBindTemplate</h1> <hr/> <h3>ngBind</h3> <div ng-bind="vm.info"></div> <hr/> <h3>ngBindTemplate</h3> <div ng-bind-template="{{vm.info}} {{vm.msg}}"></div> <hr/> <h3>ngBindHtml</h3> <div ng-bind-html="vm.trust_my_html(vm.html)"></div> <div compile-bind-html="vm.html"></div> <div bind-html-compile="vm.html"></div> <hr/> <h3>ngInclude</h3> <div ng-include="'template-1'"></div> <div ng-include="'template-2'"></div></body>
index.js
(function(){ angular.module('MyApp', ['angular-bind-html-compile']) .run(configFuc) .controller('MyController', MyController) .directive('compileBindHtml', compileBindHtml); configFuc.$inject = ['$templateCache']; MyController.$inject = ['$sce']; compileBindHtml.$inject = ['$compile']; function configFuc($templateCache){ var template = '<div class="container">\ <div class="title">{{vm.info}}</div>\ <div class="content">content</div>\ </div>'; $templateCache.put('template-2', template); } function MyController($sce){ var vm = this; vm.info = 'Hello,World'; vm.msg = 'Thank You!'; vm.html = '<div class="container">\ <div class="title">{{vm.info}}</div>\ <div class="content">content</div>\ </div>'; vm.trust_my_html = trust_my_html; vm.get_trust_html = get_trust_html; function trust_my_html(str){ return $sce.trustAsHtml(str); } function get_trust_html(str){ return $sce.getTrustedHtml(str); } } function compileBindHtml($compile){ var directive = { restrict: 'AE', link:linkFunc }; return directive; function linkFunc(scope, elements, attrs){ var func = function(){ return scope.$eval(attrs.compileBindHtml); }; scope.$watch(func, function(newValue){ elements.html(newValue); $compile(elements.contents())(scope); }) } }})();
style.css
h1.title{ text-align: center;}h1.title span{ color: #CCC;}.container{ width: 100%; height: 60px;}.container .title{ height: 20px; background-color: #b3d4fc; font-size: 20px; line-height: 20px; text-align: center;}.container .content{ height: 40px; background-color: #0000FF; font-size: 15px; line-height: 40px; text-align: center;}h3{ text-align: center; color: #FF0000;}div{ text-align: center;}
參考的資料：How to make ng-bind-html compile angularjs code
2015年09月06日發(fā)布
更多****
4 推薦
收藏
你可能感興趣的文章
Angularjs標(biāo)簽?zāi)０寮虞d原理 4 收藏，2.8k 瀏覽
淺談AngularJS模板 22 收藏啼染，5.5k 瀏覽
AngularJS 使用感受 4 收藏宴合，3k 瀏覽
本文 禁止轉(zhuǎn)載焕梅，如有需要請(qǐng)先聯(lián)系作者。
討論區(qū)
提交評(píng)論
**
×
評(píng)論支持部分 Markdown 語(yǔ)法：bold
italic
link
引用
code
- 列表
卦洽。同時(shí)贞言，被你 @ 的用戶也會(huì)收到通知
本文隸屬于專欄
AngularJS
Classical is something not fade,but grow more precious with time pass by,so is dream id dream.
關(guān)注專欄
系列文章
Angular2基礎(chǔ)之展示數(shù)據(jù)2 收藏， 142 瀏覽
Angular2基礎(chǔ)之用戶輸入3 收藏阀蒂， 215 瀏覽
Angular2基礎(chǔ)之表單使用6 收藏该窗， 311 瀏覽
掌握Angular2的依賴注入11 收藏， 470 瀏覽
