Angularjs 动态添加指令并绑定事件的方法


Posted in Javascript onApril 13, 2017

这两天学习了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','$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事件。

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片段先编译后再插入。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
jquery随机展示头像代码
Dec 21 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 #Javascript
JS传参及动态修改页面布局
Apr 13 #Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 #Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 #Javascript
MUI  Scroll插件的使用详解
Apr 13 #Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 #Javascript
You might like
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Linux的文件类型
2016/07/05 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
董事长秘书工作职责
2014/06/10 职场文书
师范生见习报告
2014/10/31 职场文书
明星邀请函
2015/02/02 职场文书
年会主持人开场白台词
2015/05/29 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python