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 相关文章推荐
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
vue地区选择组件教程详解
May 04 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
教师节获奖感言
2015/07/31 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android