快捷導(dǎo)航

AngularJS動(dòng)態(tài)綁定HTML的方法分析

更新時(shí)間：2016年11月07日 10:17:01 作者：破狼

這篇文章主要介紹了AngularJS動(dòng)態(tài)綁定HTML的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)動(dòng)態(tài)綁定HTML的相關(guān)操作指令用法與使用注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了AngularJS動(dòng)態(tài)綁定HTML的方法。分享給大家供大家參考，具體如下：

在Web前端開發(fā)中，我們經(jīng)常會(huì)遇見需要?jiǎng)討B(tài)的將一些來自后端或者是動(dòng)態(tài)拼接的HTML字符串綁定到頁面DOM顯示，特別是在內(nèi)容管理系統(tǒng)（CMS：是Content Management System的縮寫），這樣的需求，更是遍地皆是。

對(duì)于對(duì)angular的讀者肯定首先會(huì)想到ngBindHtml，對(duì),angular為我們提供了這個(gè)指令來動(dòng)態(tài)綁定HTML，它會(huì)將計(jì)算出來的表達(dá)式結(jié)果用innerHTML綁定到DOM。但是，問題并不是這么簡單。在Web安全中XSS（Cross-site scripting，腳本注入攻擊），它是在Web應(yīng)用程序中很典型的計(jì)算機(jī)安全漏洞。XSS攻擊指的是通過對(duì)網(wǎng)頁注入可執(zhí)行客戶端代碼且成功地被瀏覽器執(zhí)行，來達(dá)到攻擊的目的，形成了一次有效XSS攻擊，一旦攻擊成功，它可能會(huì)獲取到用戶的一些敏感信息、改變用戶的體驗(yàn)、誘導(dǎo)用戶等非法行為，有時(shí)XSS攻擊還會(huì)合其他攻擊方式同時(shí)實(shí)施比如SQL注入攻擊服務(wù)器和數(shù)據(jù)庫、Click劫持、相對(duì)鏈接劫持等實(shí)施釣魚，它帶來的危害是巨大的，也是web安全的頭號(hào)大敵。更多的Web安全問題，請(qǐng)參考wiki https://en.wikipedia.org/wiki/Cross-site_scripting%E3%80%82

在angular中默認(rèn)是不相信添加的HTML內(nèi)容，對(duì)于添加的HTML內(nèi)容，首先必須利用$sce.trustAsHtml，告訴angular這是可信的HTML內(nèi)容。否則你將會(huì)得到$sce:unsafe的異常錯(cuò)誤。

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

下面是一個(gè)綁定簡單的angular鏈接的demo：

HTML：

<div ng-controller="DemoCtrl as demo">
  <div ng-bind-html="demo.html"></div>
</div>

JavaScript：

angular.module("com.ngbook.demo", [])
  .controller("DemoCtrl", ["$sce", function($sce) {
    var vm = this;
    var html = '<p>hello <a ;
    vm.html = $sce.trustAsHtml(html);
    return vm;
  }]);

對(duì)于簡單的靜態(tài)HTML，這個(gè)問題就解決了。但對(duì)于復(fù)雜的HTML，這里的復(fù)雜是指帶有angular表達(dá)式、指令的HTML模板，對(duì)于它們來說，我們不僅希望綁定大DOM顯示，同時(shí)還希望得到angular強(qiáng)大的雙向綁定機(jī)制。ngBindHhtml并不會(huì)和$scope關(guān)聯(lián)雙向綁定，如果在HTML中存在ngClick、ngHref、ngSHow、ngHide等angular指令，它們并不會(huì)被compile，點(diǎn)擊這些按鈕，也不會(huì)發(fā)生任何反應(yīng)，綁定的表達(dá)式也不會(huì)在更新。例如嘗試將上次的鏈接變?yōu)椋簄g-href=“demo.link”，鏈接并不會(huì)被解析，在DOM看見的仍然會(huì)是原樣的HTML字符串。

在angular中的所有指令要生效，都需要經(jīng)過compile，在compile中包含了pre-link和post-link，連接上特定行為，才能工作。大部分情況下compile，是會(huì)在angular啟動(dòng)時(shí)，自動(dòng)compile的。但如果是對(duì)于動(dòng)態(tài)添加的模板，則需要手動(dòng)的compile。angular中為我們提供了$compile服務(wù)來實(shí)現(xiàn)這一功能。下面是一個(gè)比較通用的compile例子：

HTML：

<body ng-controller="DemoCtrl as demo">
  <dy-compile html="{{demo.html}}">
  </dy-compile>
  <button ng-click="demo.change();">change</button>
</body>

JavaScript：

angular.module("com.ngbook.demo", [])
  .directive("dyCompile", ["$compile", function($compile) {
    return {
      replace: true,
      restrict: 'EA',
      link: function(scope, elm, iAttrs) {
        var DUMMY_SCOPE = {
            $destroy: angular.noop
          },
          root = elm,
          childScope,
          destroyChildScope = function() {
            (childScope || DUMMY_SCOPE).$destroy();
          };
        iAttrs.$observe("html", function(html) {
          if (html) {
            destroyChildScope();
            childScope = scope.$new(false);
            var content = $compile(html)(childScope);
            root.replaceWith(content);
            root = content;
          }
          scope.$on("$destroy", destroyChildScope);
        });
      }
    };
  }])
  .controller("DemoCtrl", [function() {
    var vm = this;
    vm.html = '<h2>hello : <a ng-href="{{demo.link}}">angular</a></h2>';
    vm.link = 'https://angular.io/';
    var i = 0;
    vm.change = function() {
      vm.html = '<h3>change after : <a ng-href="{{demo.link}}">' + (++i) + '</a></h3>';
    };
  }]);

這里創(chuàng)建了一個(gè)叫dy-compile的指令，它首先會(huì)監(jiān)聽綁定屬性html值的變化，當(dāng)html內(nèi)容存在的時(shí)候，它會(huì)嘗試首先創(chuàng)個(gè)一個(gè)子scope，然后利用$compile服務(wù)來動(dòng)態(tài)連接傳入的html，并替換掉當(dāng)前DOM節(jié)點(diǎn)；這里創(chuàng)建子scope的原因，是方便在每次銷毀DOM的時(shí)，也能容易的銷毀掉scope，去掉HTML compile帶來的watchers函數(shù)，并在最后的父scope銷毀的時(shí)候，也會(huì)嘗試銷毀該scope。

因?yàn)橛辛松线叺腸ompile的編譯和連接，則ngHref指令就可以生效了。這里只是嘗試給出動(dòng)態(tài)compile angular模塊的例子，具體的實(shí)現(xiàn)方式，請(qǐng)參照你的業(yè)務(wù)來聲明特定的directive。

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: