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

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

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

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

因為希望實現(xiàn)一個能夠復用的table，所以定義了一個指令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: ["導入時間", "導入名稱", "結(jié)果", "操作"],
 theadName: ["importDate", "name", "result", "oper"]
 };
});

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

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

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>

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

temp文件代碼修改：

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

當item[name] 等于 "<a href='javascript:;' ng-click='show(item)'>查看信息</a>"時，我們需要通過compileBindExpn指令來手動編譯，再放到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方法也能正常使用。如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: