详解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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Linux中为php配置伪静态
2014/12/17 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Javascript Object.extend
2010/05/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jQuery设计思想
2017/03/07 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python从零开始创建区块链
2018/03/06 Python
python构建深度神经网络(续)
2018/03/10 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
高校十八大报告感想
2014/01/27 职场文书
会计专业导师推荐信
2014/03/08 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
个人年度总结报告
2015/03/09 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android