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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 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 时间计算问题小结
2009/01/04 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
详解YII关联查询
2016/01/10 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python PyQt5整理介绍
2020/04/01 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
幼儿园父亲节活动方案
2014/03/11 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
员工福利申请报告
2015/05/15 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016教师国培研修感言
2015/12/08 职场文书
python如何读取.mtx文件
2021/04/22 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
PyTorch device与cuda.device用法
2022/04/03 Python