时间:2021-05-28
这两天学习了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应该怎么实现呢?想当然的情况是这样的:
理想很丰满,点击test的时候内容确实变成了input,但是input不能绑定任何ng事件。
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片段先编译后再插入。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:AngularJS中模板的使用,事件绑定以
AngularJS事件AngularJS有自己的HTML事件指令。ng-click指令ng-click指令定义了AngularJS点击事件。AngularJS实
Angularjs的键盘事件的绑定推荐button方法一:ng内置指令登录说明:在对应的控制器中的$scope上绑定一个todoSomething方法$scop
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:假设我们要给ul动态添加的绑定click事件形成如下结果applepearfunctiontes
AngularJS参考手册AngularJS指令本教程用到的AngularJS指令:指令描述ng-app定义应用程序的根元素。ng-bind绑定HTML元素到应