详解angularJS动态生成的页面中ng-click无效解决办法


Posted in Javascript onJune 19, 2017

今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案

1.首先将我们要赋值给页面的数据new一下

var html = "<a href='javascript:void(0);' ng-click='test()'></a>"

 2.用$compile函数编译一下上边的内容

var $html = $compile(html)($scope);

3.将编译好的内容插入到页面中

$("body").append($html);

完成

以下是完整版本

app.controller('customersCtrl', function ($scope, $http,$compile) { 
$scope.test = function(){ 
  alert('test'); 
} 
 
// TODO 动态生成html中 ng-click无效 解决方法 $compile 是传进来的 
//下边这句话就是要写入页面中的内容,首先把你写入的内容赋值给html 
var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 
  
 
//用$compile进行编译 
 
var $html = $compile(html)($scope); 
 
 
//添加到页面中,或者你任何想添加的位置。}); 
 
$("body").append($html);

这样ng-click就可以触发function了 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
JS伪继承prototype实现方法示例
Jun 20 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 #Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 #Javascript
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
Web制作验证码功能实例代码
Jun 19 #Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 #Javascript
详解vue服务端渲染(SSR)初探
Jun 19 #Javascript
jQuery实现简单的手风琴效果
Apr 17 #jQuery
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python绘制3D图形
2018/05/03 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
销售主管岗位职责
2014/02/08 职场文书
《学会待客》教学反思
2014/02/22 职场文书
晚会主持词开场白
2014/03/17 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2014年业务工作总结
2014/11/17 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
大学运动会加油稿
2015/07/22 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL