详解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 事件参考手册
Dec 24 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 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生成静态页面详解
2006/12/05 PHP
PHP教程 基本语法
2009/10/23 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php中apc缓存使用示例
2013/12/25 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
详解Swift中属性的声明与作用
2016/06/30 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python 发送邮件方法总结
2020/08/10 Python
Python字典dict常用方法函数实例
2020/11/09 Python
个人思想理论学习的自我鉴定
2013/11/30 职场文书
工会趣味活动方案
2014/08/18 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014年人大工作总结
2014/12/10 职场文书
综治目标管理责任书
2015/05/11 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书