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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css标签resolution,html/css to fit all screen resolution

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效&#xff0c;请关闭广告屏蔽插件后再试):问题:Im working on the website and Im trying to make it responsive to all resolutions but without success..Here is HTML:Lorem ipsum nasov je? "Lorem…

钉钉开发笔记(一)

钉钉开发分为&#xff1a;1、移动客户端。2、PC端。3、服务端。三个平台的开发。 1、移动端&#xff1a;面对钉钉手机用户和企业用户。 2、同上主要面向PC端的用户和企业。 3、服务端&#xff0c;用于用户和企业内部管理的平台方向&#xff0c;例如OA网站。 本人主要从事移动端…

import导入模块

面试题: import module与from module import * 两种模块导入有何区别 1. import module 引用共享变量时&#xff0c;要使用module.变量名,而from module import * 直接使用变量名即可 2. import module方式 本地不会创…

在启动HDFS时,针对集群中namenode无法识别datanode的问题的解决方法

最近由于重装了系统&#xff0c;需要对之前搭建的集群要做些改动。在对每个虚拟机的网络进行正确的配置之后&#xff0c;重新执行hadoop/sbin/start-dfs.sh命令来启动HDFS&#xff0c;然而namenode却无法识别datanode。 后来通过对之前学过的知识进行回顾和梳理发现了问题的所…

HBase的基础知识

1.HBase(NoSQL&#xff1a;不是关系型数据库)的逻辑数据模型 HBase – Hadoop Database&#xff0c;是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统&#xff0c;利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群。HBase利用Hadoop HDFS作为其文件存储系统…

Django 部署基础【使用 Nginx + uWSGI 的方式来部署来 Django】

本文主要讲解在 Linux 平台下&#xff0c;使用 Nginx uWSGI 的方式来部署来 Django&#xff0c;这是目前比较主流的方式。当然你也可以使用 Gunicorn 代替 uWSGI&#xff0c;不过原理都是类似的&#xff0c;弄懂了其中一种&#xff0c;其它的方式理解起来问题也不会很大。 有很…

css的属性是变量是怎么表达,CSS自定义属性(变量)

Github上有个叫electron-api-demos的项目&#xff0c;看代码的时候发现了这么一个css文件(variables.css)&#xff1a;:root {--color: hsl(0,0%,22%);--color-subtle: hsl(0,0%,44%);--color-strong: hsl(0,0%,11%);--color-link: hsl(0,0%,22%);--color-border: hsl(0,0%,88%…

Exception in thread main java.lang.UnsupportedClassVersionError的另类解决办法

最近在Linux虚拟机上跑在windows平台上的eclipes打出来的jar包时报出Exception in thread “main” java.lang.UnsupportedClassVersionError的错误&#xff1a; 经过上网查询了解到是因为自己Windows使用的是jdk1.8版本&#xff0c;而Linux使用的是jdk1.7版本&#xff0c;所…

Linux命令【第一篇】

1、创建一个目录/data 记忆方法&#xff1a;英文make directorys缩写后就是mkdir。 命令&#xff1a; mkdir /data 或 cd /;mkdir data #提示&#xff1a;使用分号可以在一行内分割两个命令。 实践过程&#xff1a; 方法一&#xff1a; [rootoldboy66 ~]# mkdir /data #查…

Jenkins + gitlab webhook实现自动化部署

1、先在Jenkins安装插件Gitlab Hook Plugin 和Build Authorization Token Root Plugin&#xff1b;2.插件安装完成后在任务里添加token3、在gitlab上添加钩子4、点击测试钩子或push代码再看Jenkins已经在构建了就说明成功了&#xff08;也可以在浏览器直接执行这个URL&#xff…

多继承以及MRO顺序【super().的使用】

多继承以及MRO顺序 1. 单独调用父类的方法 # codingutf-8print("******多继承使用类名.__init__ 发生的状态******") class Parent(object):def __init__(self, name):print(parent的init开始被调用)self.name nameprint(parent的init结束被调用)class Son1(Paren…

人工智能专业词汇集

最近看到一篇关于AI专业词汇总结的文章&#xff0c;感觉不错&#xff0c;分享一下。 对应的词汇项目地址为&#xff1a;https://github.com/jiqizhixin/Artificial-Intelligence-Terminology 本词汇库目前拥有的专业词汇共计 500 个&#xff0c;主要为机器学习基础概念和术语…

js 当前日期增加自然月

js 在日期不满足的情况下就会自动加1个月&#xff0c;比如在当前时间为3月31号&#xff0c;传入1&#xff0c;1两个参数&#xff0c;预期结果为2月29日&#xff0c;但是结果输出了3月2日。就是如果不满就会溢出到下个月&#xff0c;后来看了api发现了setMonth有两个方法&#x…

好雨云帮如何对接Git Server

前言 云帮目前支持对接GitLab、Gogs、Github,或者主流代码托管平台的公开项目&#xff0c;后期会考虑接入其他类型的Git服务。 私有云 GitLab是一个用于仓库管理系统的开源项目&#xff0c;私有云服务里使用比较多的自建Git服务。 对接GitLab 通过应用市场进行安装Gitlab 安装G…

Python 生成requirement 使用requirements.txt

python项目中必须包含一个 requirements.txt 文件&#xff0c;用于记录所有依赖包及其精确的版本号。以便新环境部署。requirements.txt可以通过pip命令自动生成和安装生成requirements.txt文件 pip freeze > requirements.txt安装requirements.txt依赖 pip install -r requ…

Source Insight上手教程

目录Project的建立和工作区域同步查看定义查找引用查找调用Source Insight常用快捷键 目录 最近刚参加工作&#xff0c;第一个任务就是查看项目的源码&#xff0c;熟悉代码结构。于是乎就简单学习了Source Insight。在这里就转载别人的文章当做自己的笔记&#xff0c;便于自己…

微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项

今天在做隐藏微信右上角的分享按钮 百度查到的一串代码&#xff0c;挺好用的 <!--禁用微信分享按钮--><script>function onBridgeReady() {WeixinJSBridge.call(hideOptionMenu);}if (typeof WeixinJSBridge "undefined") {if (document.addEventListen…

python2.7无法使用pip(安装easy_install)

python27和python36 共存时安装pip方法&#xff0c;解决python27文件夹下没有script文件方法 报错&#xff1a; D:\PYTHON2.7>python ez_setup.py Downloading http://pypi.python.org/packages/2.7/s/setuptools/setuptools-0.6c11-py2.7.egg Traceback (most recent call…

Codeforces 754E:Dasha and cyclic table

Codeforces 754E&#xff1a;Dasha and cyclic table 题目链接&#xff1a;http://codeforces.com/problemset/problem/754/E 题目大意&#xff1a;$A$矩阵&#xff08;$size(A)n \times m$&#xff0c;仅含a-z&#xff09;在整个平面做周期延拓&#xff0c;问$B$矩阵&#xff…

位运算中的左移和右移的计算详解

最近在学习javaScrapt&#xff0c;在学到位运算符这部分的时候&#xff0c;突然发现看不懂书上的例子了。经过查找资料后&#xff0c;发现了一遍不错的文章。分享一下&#xff1a; 正数的左移和右移 以3为例 3的二进制为 00000011 右移2位的时候将最右的11去掉左边补00结果…