详解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实现画板的代码
Sep 05 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
详解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/07/29 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
angular2使用简单介绍
2016/03/01 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python中的句柄操作的方法示例
2019/06/20 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
thinkphp5 路由分发原理
2021/03/18 PHP
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
工作业绩不及格检讨书
2014/10/28 职场文书
单方投资意向书
2015/05/11 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Python基本数据类型之字符串str
2021/07/21 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers
mysql序号rownum行号实现方式
2022/12/24 MySQL