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如何動態添加指令并綁定事件
URL鏈接：http://m.kartarina.com/article16/gespgg.html

成都網站建設公司_創新互聯，為您提供虛擬主機、軟件開發、小程序開發、微信小程序、手機網站建設、網站維護

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯