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

先说使用场景，动态生成DOM元素并绑定事件，非常常见的一种场景，用jq实现效果：

http://jsbin.com/gajizuyuju/edit?html,js,output

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事件。

稍微修改下:http://jsbin.com/zujalapone/edit?html,js,output

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 动态添加指令并绑定事件

最新文章

热门文章