详解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之大字符串的连接的StringBuffer 类
May 08 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
FF IE兼容性的修改小结
Sep 02 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
使用javascipt---实现二分查找法
2013/04/10 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
初识Node.js
2015/03/20 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python检测lvs real server状态
2014/01/22 Python
Python实现网站表单提交和模板
2019/01/15 Python
详解python中sort排序使用
2019/03/23 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python中web框架的自定义创建
2019/09/08 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python __slots__的使用方法
2020/11/15 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
详解python的变量缓存机制
2021/01/24 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
《乞巧》教学反思
2014/02/27 职场文书
宣传标语大全
2014/07/01 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
电力工程合作意向书
2015/05/11 职场文书
给朋友的赠语
2015/06/23 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers