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为ng-click事件传递参数 # angular ng-click防止重复提交实例 # AngularJS基础 ng-click 指令示例代码 # AngularJS的ng-click传参的方法 # 详解angularJS动态生成的页面中ng-click无效解决办法 # AngularJS中directive指令使用之事件绑定与指令交互用法示例 # Angularjs中使用指令绑定点击事件的方法 # AngularJs ng-change事件/指令的用法小结 # Angularjs 事件指令详细整理 # Angular使用操作事件指令ng-click传多个参数示例 # 绑定 # 都是 # 是这样 # 很重要 # 想当然 # 这两天 # 先说 # 大家多多 # 挺多 # 变成了 # 也就是说 # 编译成 # function # count # test # click # event # toLowerCase # input # target

返回目录在线咨询

上一篇：C# 中的ValueTuple是什么 - 轻量级的元组类型
下一篇：建站服务器配置：如何选择最适合的CPU和内存？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求