Angularjs 动态添加指令并绑定事件
2017-04-06 18:13
561 查看
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果:
http://jsbin.com/gajizuyuju/edit?html,js,output
如果用angularjs应该怎么实现呢?想当然的情况是这样的:
理想很丰满,点击test的时候内容确实变成了input,但是input不能绑定任何ng事件。
稍微修改下:http://jsbin.com/zujalapone/edit?html,js,output
达到目的~
这里用到了$compile服务,官方的解释是compile可以将一个HTML字符串或者DOM编译成模板,该模板能够与scope链接起来,也就是说直接插入一段html片段到页面中,虽然能插入进去,但是angular并没有编译,所以任何ng事件指令绑定都是无效的,通过compile能够将html片段先编译后再插入。
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片段先编译后再插入。
相关文章推荐
- Angularjs 动态添加指令并绑定事件的方法
- jQuery -- 如何为动态添加的元素绑定事件处理函数
- JavaScript动态添加|绑定事件
- 关于jquery动态添加的新元素无法绑定事件那些事
- Jquery 动态添加dom后,再为其绑定事件
- jquery为动态添加的元素绑定事件
- GridView动态添加模板列(并为其添加事件和自动绑定数据)
- jQuery动态添加元素并绑定事件
- asp.net C#动态添加创建生成button按钮控件没有触发执行响应click绑定事件处理
- jquery mobile Checkbox动态添加刷新及事件绑定
- jquery给动态添加的dom元素绑定事件
- 为动态创建的控件添加事件绑定
- 动态添加ASP.NET控件并绑定处理事件一例
- jquery为动态添加的元素绑定事件
- 动态添加ASP.NET控件并绑定处理事件
- JavaScript动态添加|绑定事件
- jquery动态添加删除div--事件绑定,对象克隆
- jQuery动态添加的元素绑定事件处理函数代码
- 为动态添加的元素,绑定click事件
- jquery为动态添加的元素绑定事件