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翻页效果
Jul 23 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue filters的使用详解
Jun 11 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
Python版实现微信公众号扫码登陆
May 28 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 中的str_replace 函数总结
2007/04/27 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript 全角转半角部分
2009/10/28 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python实现简单飞行棋
2020/02/06 Python
Python 如何对文件目录操作
2020/07/10 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
医院节能减排方案
2014/06/13 职场文书
校本课程教学计划
2015/01/19 职场文书
爱国主题班会教案
2015/08/14 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python基础教程,Python入门教程(超详细)
2021/06/24 Python