详解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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
Vue计算属性的使用
Aug 04 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
如何制作自己的原生JavaScript路由
May 05 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php中autoload的用法总结
2013/11/08 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python动态监控日志内容的示例
2014/02/16 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python元组知识点总结
2019/02/18 Python
深入理解Django-Signals信号量
2019/02/19 Python
详解python中各种文件打开模式
2020/01/19 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
环保专项行动方案
2014/05/12 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
北京爱情故事观后感
2015/06/12 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android