详解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 监听textarea中按键事件
Oct 08 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
webpack构建的详细流程探底
Jan 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
摩卡咖啡
2021/03/03 咖啡文化
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
Smarty变量用法详解
2016/05/11 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
javascript将list转换成树状结构的实例
2017/09/08 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python解析xml模块封装代码
2014/02/07 Python
跟老齐学Python之for循环语句
2014/10/02 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python 切分数组实例解析
2019/11/07 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
python SOCKET编程基础入门
2021/02/27 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
十一酒店活动方案
2014/02/20 职场文书
中班开学寄语
2014/04/04 职场文书
世界遗产的导游词
2015/02/13 职场文书
单位收入证明范本
2015/06/18 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书