详解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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
微信小程序自定义联系人弹窗
May 26 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如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python 画函数曲线示例
2019/12/04 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
python 写一个性能测试工具(一)
2020/10/24 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
资深地理教师自我评价
2013/09/21 职场文书
业务总经理岗位职责
2014/02/03 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
催款函怎么写
2015/06/24 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android