后台-插件-广告管理-内容页广告位一(手机)

您现在的位置是:首页 > 编程语言 > JavaScriptJavaScript

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

2021-05-19 13:06:02JavaScript人已围观

简介本篇文章主要介绍了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','$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片段先编译后再插入。

文章来源:https://www.jb51.net/article/111101.htm

Tags:angularjs 动态绑定 绑定事件 指令绑定 

很赞哦! ()

后台-插件-广告管理-内容页广告位二(手机)
后台-插件-广告管理-内容页广告位三(手机)
后台-插件-广告管理-内容页广告位四(手机)

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计49227篇文章
  • 浏览统计3200次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们