详解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 相关文章推荐
各种常用的JS函数整理
Oct 25 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
详解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+redis实现添加处理投票的方法
2015/11/14 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
常用PHP封装分页工具类
2017/01/14 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python nmap实现端口扫描器教程
2020/05/28 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
英文自荐信
2013/12/15 职场文书
运动会入场解说词300字
2014/01/25 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
继承公证书样本
2014/04/04 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技