详解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 相关文章推荐
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
详解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生成PDF格式文件并且加密
2015/06/22 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
如何在PHP中使用数组
2020/06/09 PHP
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
pandas实现选取特定索引的行
2018/04/20 Python
用Python逐行分析文件方法
2019/01/28 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
教学个人的自我评价分享
2014/02/16 职场文书
聚美优品广告词改编
2014/03/14 职场文书
房屋出租协议书
2014/04/10 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android