详解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 模式实例 观察者模式
Oct 24 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
理解Javascript的call、apply
Dec 16 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
详解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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Python实现Const详解
2015/01/27 Python
详解Python Socket网络编程
2016/01/05 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
教师新年寄语
2014/04/03 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
志愿者事迹材料
2014/12/26 职场文书
旷课检讨书
2015/01/26 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
工程服务质量承诺书
2015/04/29 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书