详解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 相关文章推荐
js href的用法
May 13 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
ECMAScript 基础知识
2007/06/29 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
python写入已存在的excel数据实例
2018/05/03 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Django实现跨域的2种方法
2019/07/31 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
优秀经理获奖感言
2014/03/04 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
看雷锋电影观后感
2015/06/10 职场文书
紧急迫降观后感
2015/06/15 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
python playwright之元素定位示例详解
2022/07/23 Python