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

 更新时间:2017年04月13日 11:57:54   作者:彼岸花在开  
本篇文章主要介绍了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片段先编译后再插入。

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

相关文章

  • AngularJS中的表单简单入门

    AngularJS中的表单简单入门

    本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴
    2016-07-07
  • angularjs2 ng2 密码隐藏显示的实例代码

    angularjs2 ng2 密码隐藏显示的实例代码

    本篇文章主要介绍了angularjs2 ng2 密码隐藏显示的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    这篇文章主要给大家介绍了关于如何使用RxJS更优雅地进行定时请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用RxJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • AngularJS基础 ng-mouseover 指令简单示例

    AngularJS基础 ng-mouseover 指令简单示例

    本文主要介绍AngularJS ng-mouseover 指令,这里帮大家整理了AngularJS 指令的基础知识,并附代码示例,有兴趣的小伙伴可以参考下
    2016-08-08
  • ionic使用angularjs表单验证(模板验证)

    ionic使用angularjs表单验证(模板验证)

    能够验证用户在表单中输入的内容是否合理与正确是十分重要的,这篇文章主要介绍了ionic使用angularjs表单验证(模板验证),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Angular中自定义Debounce Click指令防止重复点击

    Angular中自定义Debounce Click指令防止重复点击

    本篇文章主要介绍了Angular中自定义Debounce Click指令详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 深入学习AngularJS中数据的双向绑定机制

    深入学习AngularJS中数据的双向绑定机制

    这篇文章主要介绍了AngularJS中数据的双向绑定机制,双向绑定使得HTML中呈现的view与AngularJS中的数据一致,是Angular的重要特性之一,需要的朋友可以参考下
    2016-03-03
  • NodeJs——入门必看攻略

    NodeJs——入门必看攻略

    下面小编就为大家带来一篇NodeJs——入门必看攻略。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Angular 向组件传递模板的两种方法

    Angular 向组件传递模板的两种方法

    这篇文章主要介绍了Angular 向组件传递模板的两种方法,第一种方式<ng-content>第二种方式是NgTemplateOutlet 指令及各种使用方式介绍,需要的朋友可以参考下
    2018-02-02
  • Angular2安装angular-cli

    Angular2安装angular-cli

    这篇文章主要介绍了Angular2安装angular-cli ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论