AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法


Posted in Javascript onJanuary 19, 2017

今天用angular写table的时候,遇到了一个问题。在ng-repeat中,含有动态的html,而这些html中含有自定义指令。

因为希望实现一个能够复用的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: ["导入时间", "导入名称", "结果", "操作"],
 theadName: ["importDate", "name", "result", "oper"]
 };
});

以上,完成了表格展示数据的功能,可是在表格列里面,经常有对某行数据的操作,而这些操作我们同样需要以html的形式插入到表格里面,并且这些html中,还会有ng-click等之类的指令,或者是自定义的指令。比如:"<a href='javascript:;' ng-click='show(item)'>查看信息</a>"; 这类的html,插入到td中,会以html代码展示出来,并不会转换成html。

在网上查阅了方法后,找到了一个转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转成正常的结果,可是a标签上的ng-click却没有效果,查看了问题的关键,是这段html并没有经过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);
  }
 })
 }
});

经过这种解决方法后,终于能够正常展示html代码,且其上的ng-click方法也能正常使用。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
php中给js数组赋值方法
Mar 10 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
vue如何判断dom的class
Apr 26 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 #Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 #Javascript
react.js 翻页插件实例代码
Jan 19 #Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 #Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 #Javascript
You might like
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
js字符串处理之绝妙的代码
2019/04/05 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python random模块常用方法
2014/11/03 Python
在Python的web框架中配置app的教程
2015/04/30 Python
python获取代理IP的实例分享
2018/05/07 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
django解决跨域请求的问题详解
2019/01/20 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
网络安全方面的面试题
2016/01/07 面试题
个人查摆剖析材料
2014/02/04 职场文书
出生证明公证书
2014/04/09 职场文书
企业宣传策划方案
2014/05/29 职场文书
护理学专业求职信
2014/06/29 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
怎样写工作总结啊!
2019/06/18 职场文书