详解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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
网站防止被刷票的一些思路与方法
2015/01/08 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python语言描述最大连续子序列和
2017/12/05 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
django正续或者倒序查库实例
2020/05/19 Python
Python实现手势识别
2020/10/21 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
幼儿教师研修感言
2014/02/12 职场文书
考核工作实施方案
2014/03/30 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
安全责任书
2015/01/29 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书