AngularJs How to implement Dynamic HTML with custom directives in ng-repeat instructions

Today, when I wrote table with angular, I encountered a problem. In Ng-repeat, there is Dynamic HTML, which contains custom directives.

Because you want to implement a reusable table, you define an instruction mystandtable, which is probably the following:

1 varMycommon = Angular.module ("Mycommon",[]);2Mycommon.directive ("Mystandtable",function () {3     return {4Restrict: "A",5Templateurl: "App/template/tabletem.html",6Transclude:false,7Replacetrue,8Controllerfunction($scope, $compile, Commonservice) {9             //Do something ...Ten         }, OneLinkfunction(scope, element, Attris) { A         } -     } -});

The tabletem.html file code is as follows:

1<div>2<table class= "Table Table-hover table-bordered" >3<thead>4<tr>5<th ng-if= "Tabledata.multiselect" >6<input type= "checkbox" id= "Check-all" ng-model= "itemschecked" >7<label for= "Check-all" class= "fa" ng-class= "{' Fa-square-o ':!itemschecked, ' Fa-check-square-o ': itemschecked}" aria-hidden= " True ">8</label>9</th>Ten<th ng-repeat= "item in Tabledata.thead" >{{item}}</th> One</tr> A</thead> -<tbody> -&LT;TR ng-repeat= "item in Tabledata.items" ng-click= "SelectItem (item)" ng-init= "item.selected = False" ng-class= "{' Selected ': item.selected} ' > the&LT;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> -&LT;TD ng-repeat= "name in Tabledata.theadname" > +{{Item[name]}} at                      -</td> -</tr> -</tbody> -</table> -</div>

The controller file code is as follows:

1 varMybasis = Angular.module ("Mybasis", ["Mycommon"]);2Mybasis.controller ("Myctrl",function($scope) {3$scope. Tabledata = {4MultiSelect:false,5PageSize: [10, 20, 50],6THEAD: ["Import Time", "Import name", "Result", "action"],7Theadname: ["Importdate", "name", "Result", "oper"]8     };9});

Above, completed the table display data function, but in the table column, there is often a row of data manipulation, and these operations we also need to be inserted into the form of HTML, and these HTML, there will be ng-click and other such instructions, or custom instructions. For example: "<a href= ' javascript:; ' ng-click= ' Show (item) ' > View info </a>"; This kind of HTML, inserted into the TD, will be displayed in HTML code, and will not be converted to HTML.

After reviewing the method on the Internet, we found a solution to the HTML, adding a filter, as follows:

1Mycommon.filter ("Trusted",function($SCE) {2     return function(HTML) {3         if(typeofhtml = = "string") {4             return$sce. trustashtml (HTML);5         }6         returnhtml;7     }8});

Then modify the code in the temp file:

1 <td ng-repeat= "name in Tabledata.theadname" >2      <span ng-bind-html= "Item[name" | Trusted "></span>3 </td>

Through the above methods, it is true that HTML can be turned into normal results, but the Ng-click on the a tag has no effect, the key to view the problem is that the HTML has not been compiled by angular, so ng-click does not work, need to manually compile, modified as follows:

Temp File Code Modification:

1 <td ng-repeat= "name in Tabledata.theadname" >2      <div compile-bind-expn = "Item[name]" >3      </div>4 </td>

When Item[name] equals "<a href= ' javascript:; ' ng-click= ' Show (item) ' > View Info </a>", we need to compile manually by COMPILEBINDEXPN instructions, and put it in the Div. The instruction code is as follows:

1Mycommon.directive ("COMPILEBINDEXPN",function($compile) {2     return functionLINKFN (Scope, Elem, attrs) {3Scope. $watch ("::" +ATTRS.COMPILEBINDEXPN,function(HTML) {4             if(HTML && html.indexof ("<")! =-1 && html.indexof (">")! =-1) {5Console.log (1);6                 varExpnlinker =$compile (HTML);7Expnlinker (Scope,functiontransclude (clone) {8 elem.empty ();9 elem.append (clone);Ten                 }); One}Else { A elem.empty (); - elem.append (HTML); -             } the         }) -     } -});

After this solution, the HTML code is finally displayed, and the Ng-click method on it can be used normally.

AngularJs How to implement Dynamic HTML with custom directives in ng-repeat instructions