The ng-repeat command in AngularJs implements a dynamic html method containing custom commands, angularjsng-repeat

The ng-repeat command in AngularJs implements a dynamic html method containing custom commands, angularjsng-repeat

When I used angular to write a table today, I encountered a problem. Ng-repeat contains dynamic html, which contains custom commands.

To implement a reusable table, a command myStandTable is defined. The command code is roughly as follows:

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) { } }});

The code of the tableTem.html file is as follows:

<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>

The Controller file code is as follows:

Var myBasis = angular. module ("myBasis", ["myCommon"]); myBasis. controller ("myCtrl", function ($ scope) {$ scope. tableData = {multiSelect: false, pageSize: [10, 20, 50], thead: ["import time", "Import Name", "result", "operation"], theadName: ["importDate", "name", "result", "success"] };});

The preceding steps show data in tables. However, operations on a row of data are often performed in table columns. These operations also need to be inserted into the table in html format, in addition, the html contains commands such as ng-click or custom commands. For example: "<a href = 'javascript:; 'ng-click = 'show (item) '> View information </a>"; html of this type is inserted into td, will be displayed in html code, and will not be converted into html.

After checking the method on the internet, I found a solution for converting to html and added a filter, as shown below:

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

Then modify the code in the temp file:

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

Through the above method, html can indeed be converted to a normal result, but the ng-click on the tag has no effect, and the key to the problem is viewed, yes, this section of html has not been compiled by angular, so ng-click does not work and needs to be compiled manually. The modification is as follows:

Modify the temp File Code:

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

When item [name] is equal"<a href='javascript:;' ng-click='show(item)'>View information </a> ", we need to use the compileBindExpn command to manually compile and then put it in the div. The command code is as follows:

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);  } }) }});

After this solution, the html code can be displayed normally, and the ng-click method on the html code can also be used normally. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!