Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果:
http://jsbin.com/gajizuyuju/edit?html,js,output
var count=0; $("#test").on("click",function(event){if(event.target.tagName.toLowerCase()=="input") return;count++;var html="<input type='text' class='newEle' value='"+count+"'/>";$(this).html(html);$(".newEle").focus(); }); $("body").on("blur",".newEle",function(){alert($(this).val()); })
如果用angularjs应该怎么实现呢?想当然的情况是这样的:
var myApp = angular.module('myApp', []);myApp.controller('MainCtrl', ['$scope','$compile',function($scope) {$scope.count = 0;$scope.add = function() {if(event.target.tagName.toLowerCase()=="input")return;var target=$(event.target);$scope.count++;target.html("<input value='"+$scope.count+"' ng-blur='showValue()'>" );}$scope.showValue=function(){alert(event.target.value)}}])
理想很丰满,点击test的时候内容确实变成了input,但是input不能绑定任何ng事件。
稍微修改下:http://jsbin.com/zujalapone/edit?html,js,output
var myApp = angular.module('myApp', []);myApp.controller('MainCtrl', ['$scope','$compile',function($scope, $compile) {$scope.count = 0;$scope.add = function() {if(event.target.tagName.toLowerCase()=="input")return;var target=$(event.target);$scope.count++; target.html($compile("<input value='"+$scope.count+"' ng-blur='showValue()'>")($scope));}$scope.showValue=function(){alert(event.target.value)}}])
达到目的~
这里用到了$compile服务,官方的解释是compile可以将一个HTML字符串或者DOM编译成模板,该模板能够与scope链接起来,也就是说直接插入一段html片段到页面中,虽然能插入进去,但是angular并没有编译,所以任何ng事件指令绑定都是无效的,通过compile能够将html片段先编译后再插入。
转载于:https://www.cnblogs.com/hutuzhu/p/6674797.html
Angularjs 动态添加指令并绑定事件相关推荐
- jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
- 动态添加html元素绑定事件,关于javascript:jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素 但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
- jQuery动态添加按钮,绑定点击事件失效
jQuery动态添加按钮,绑定点击事件失效 因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效. 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页 ...
- 使用dockpanel动态添加picturebox并绑定图片
关于DockManager的使用之前已经介绍过,这里不再赘述.直接说如何在dockpanel中动态添加picturebox并绑定图片. 1.生成picturebox的方法 public void ge ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定事件的解决方案. 参考文章: (1)jquery动态添加元素无法触发绑定事件的解决方案. (2)https://www.cnblogs.com/momozjm/p/ ...
- 【视频】vue指令v-on绑定事件
P6vue指令v-on绑定事件 https://www.bilibili.com/video/av91679349?p=6
- jQuery Dom 操作,动态生成dom,绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
最新文章
- 深度学习时代的图模型,清华发文综述图网络
- Web开发(一)·期末不挂之第二章·HTML基础一(考试必考冷知识)
- C++ 贪吃蛇小游戏
- HTML5中的标记方法
- Oracle 11g 新特性 – HM(Hang Manager)简介
- vue+vuex+vur-router+ElementUI+axios +springboot打造响应式博客项目
- 秀米编辑器详细使用教程
- The Byzantine Generals Problem拜占庭将军问题理解
- 真实经历!运维安全工程师经典面试汇总
- win10计算机 需要新应用,手把手为你win10系统商店出现“需要新应用打开此ms-windows-store”的还原步骤...
- 八、码元、波特、速率和带宽
- C语言编写万年历,解决1582年历史问题
- 帧率、码率、分辨率、清晰度概念
- 百度超级链(xuperchain),make时出现错误
- 技术2---swagger2
- 遇到factory.BeanNotOfRequiredTypeException Bean named xxx is expected tobe of type
- python win32print txt_Python Win32Print打印机状态混乱
- python 字符串去重
- Java序列化与反序列化详解
- 使用AssetFileDescriptor 来读取(android)app的raw文件夹下的数据