快捷導(dǎo)航

AngularJs中 ng-repeat指令中實(shí)現(xiàn)含有自定義指令的動(dòng)態(tài)html的方法

更新時(shí)間：2017年01月19日 11:25:30 作者：臉別再大了

今天用angular寫table的時(shí)候，遇到了一個(gè)問題。在ng-repeat中，含有動(dòng)態(tài)的html，而這些html中含有自定義指令，怎么實(shí)現(xiàn)呢？下面小編給大家分享AngularJs中 ng-repeat指令中實(shí)現(xiàn)含有自定義指令的動(dòng)態(tài)html的方法，一起看看吧

今天用angular寫table的時(shí)候，遇到了一個(gè)問題。在ng-repeat中，含有動(dòng)態(tài)的html，而這些html中含有自定義指令。

因?yàn)橄Ｍ麑?shí)現(xiàn)一個(gè)能夠復(fù)用的table，所以定義了一個(gè)指令myStandTable，指令代碼大概如下：

var myCommon = angular.module("myCommon",[]);
myCommon.directive("myStandTable", function () {
 return {
 restrict: "A",
 templateUrl: "app/template/tableTem.html",
 transclude: false,
 replace: true,
 controller: function ($scope,$compile, commonService) {
  // do something... 
 },
 link: function (scope, element, attris) {
 }
 }
});

tableTem.html文件代碼如下：

<div>
 <table class="table table-hover table-bordered">
 <thead>
  <tr>
  <th ng-if="tableData.multiSelect">
   <input type="checkbox" id="check-all" ng-model="itemsChecked">
   <label for="check-all" class="fa" ng-class="{'fa-square-o': !itemsChecked, 'fa-check-square-o': itemsChecked }" aria-hidden="true">
   </label>
  </th>
  <th ng-repeat="item in tableData.thead">{{item}}</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="item in tableData.items" ng-click="selectItem(item)" ng-init="item.selected = false" ng-class="{'selected': item.selected}">
  <td ng-if="tableData.multiSelect">
   <input type="checkbox" id="check_{{$index}}" ng-model="item.selected">
   <label for="check_{{$index}}" class="fa" ng-class="{'fa-square-o': !item.selected, 'fa-check-square-o': item.selected }" aria-hidden="true">
   </label>
  </td>
  <td ng-repeat="name in tableData.theadName">
   {{item[name]}}
   
  </td>
  </tr>
 </tbody>
 </table>
</div>

控制器文件代碼如下：

var myBasis = angular.module("myBasis",["myCommon"]);
myBasis.controller("myCtrl", function ($scope) {
 $scope.tableData = {
 multiSelect: false,
 pageSize: [10, 20, 50],
 thead: ["導(dǎo)入時(shí)間", "導(dǎo)入名稱", "結(jié)果", "操作"],
 theadName: ["importDate", "name", "result", "oper"]
 };
});

以上，完成了表格展示數(shù)據(jù)的功能，可是在表格列里面，經(jīng)常有對(duì)某行數(shù)據(jù)的操作，而這些操作我們同樣需要以html的形式插入到表格里面，并且這些html中，還會(huì)有ng-click等之類的指令，或者是自定義的指令。比如："<a href='javascript:;' ng-click='show(item)'>查看信息</a>"; 這類的html，插入到td中，會(huì)以html代碼展示出來，并不會(huì)轉(zhuǎn)換成html。

在網(wǎng)上查閱了方法后，找到了一個(gè)轉(zhuǎn)html的解決辦法，增加一個(gè)過濾器，如下：

myCommon.filter("trusted", function ($sce) {
 return function (html) {
 if (typeof html == "string") {
  return $sce.trustAsHtml(html);
 }
 return html;
 }
});

然后修改temp文件中的代碼：

 <td ng-repeat="name in tableData.theadName">
 <span ng-bind-html="item[name] | trusted"></span>
</td>

通過以上方法，確實(shí)可以將html轉(zhuǎn)成正常的結(jié)果，可是a標(biāo)簽上的ng-click卻沒有效果，查看了問題的關(guān)鍵，是這段html并沒有經(jīng)過angular的編譯，所以ng-click不起作用，需要手動(dòng)編譯，修改如下：

temp文件代碼修改：

 <td ng-repeat="name in tableData.theadName">
 <div compile-bind-expn = "item[name]">
 </div>
 </td>

當(dāng)item[name] 等于 "<a href='javascript:;' ng-click='show(item)'>查看信息</a>"時(shí)，我們需要通過compileBindExpn指令來手動(dòng)編譯，再放到div里面去。指令代碼如下：

myCommon.directive("compileBindExpn", function ($compile) {
 return function linkFn(scope, elem, attrs) {
 scope.$watch("::"+attrs.compileBindExpn, function (html) {
  if (html && html.indexOf("<") != -1 && html.indexOf(">") != -1) {
  console.log(1);
  var expnLinker = $compile(html);
  expnLinker(scope, function transclude (clone) {
   elem.empty();
   elem.append(clone);
  });
  } else {
  elem.empty();
  elem.append(html);
  }
 })
 }
});

經(jīng)過這種解決方法后，終于能夠正常展示html代碼，且其上的ng-click方法也能正常使用。如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: