详解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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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注入点构造代码
2008/06/14 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
Python多线程编程简单介绍
2015/04/13 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python之拟合的实现
2019/07/19 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python 如何查找特定类型文件
2020/08/17 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
《口技》教学反思
2014/02/21 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
五一劳动节活动记录
2014/03/23 职场文书
求职意向书范文
2014/04/01 职场文书
《长江之歌》教学反思
2014/04/17 职场文书