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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
从零开始学习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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python 中的divmod数字处理函数浅析
2017/10/17 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
好家长事迹材料
2014/01/23 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
三好学生评语大全
2014/12/29 职场文书
人事局接收函
2015/01/31 职场文书
周一问候语大全
2015/11/10 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
小程序实现侧滑删除功能
2022/06/25 Javascript