Angularjs 动态添加指令并绑定事件的方法
网络编程 2021-07-04 18:32www.168986.cn编程入门
本篇文章主要介绍了Angularjs 动态添加指令并绑定事件的方法,长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果:
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','$pile',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事件。
var myApp = angular.module('myApp', []); myApp.controller('MainCtrl', ['$scope','$pile',function($scope, $pile) { $scope.count = 0; $scope.add = function() { if(event.target.tagName.toLowerCase()=="input")return; var target=$(event.target); $scope.count++; target.html($pile("<input value='"+$scope.count+"' ng-blur='showValue()'>")($scope)); } $scope.showValue=function(){ alert(event.target.value) } }])
达到目的~
这里用到了服务,官方的解释是pile可以将一个HTML字符串或者DOM编译成模板,该模板能够与scope链接起来,也就是说直接插入一段html片段到页面中,虽然能插入进去,但是angular并没有编译,所以任何ng事件指令绑定都是无效的,通过pile能够将html片段先编译后再插入。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程