如何強制jQuery識別動態創建的AngularJS元素？

我正在使用AngularJS動態創建頁面。我有一些Tab（jquery）單擊處理程序，它們在頁面的以前靜態版本上工作正常。如何強制jQuery識別動態創建的AngularJS元素？

問題是，$（。prevButton）和$（。nextButton）元素是由AngularJS創建的，顯然Jquery沒有註冊它們。一旦創建頁面，我就可以將下面的代碼粘貼到控制檯中，並且一切正常。

如何強制jquery「重新掃描」DOM，以便它註冊所有這些動態創建的元素？還是有另一種技術來避免這個問題？

$(document).ready(function() { 
    $('.prevButton').click(function() { 
    var r = $(this).attr('tabGroup'); 
    var e = ($('.nav-tabs[tabGroup=' + r + '] li.active').prev().find('a[data-toggle="tab"]')); 
    if (e.length > 0) { 
     e.click(); 
    } 
    return false; //prevent the page from jumping around 
}); 

$('.nextButton').click(function() { 
    var r = $(this).attr('tabGroup'); 
    var f = ($('.nav-tabs[tabGroup=' + r + '] li.active').next().find('a[data-toggle="tab"]')); 
    if (f.length > 0) { 
     f.click(); 
    } 
    return false; //prevent the page from jumping around 
}); 
}

非常感謝您的任何提示！

來源

2013-03-22 Hairgami_Master

它說，就在角文檔不使用jquery作爲柺杖做DOM操作，而是寫指令和使用的角度活動！ – 2013-03-22 21:37:16

@NickLarsen我不是在操縱dom，是嗎？ – 2013-03-22 21:40:41

添加處理程序和觸發事件，我會說你正在操縱DOM。 – 2013-03-22 21:44:02

擺脫jQuery的使用。使用ngClick指令來指定哪些函數調用元素單擊並將函數添加到當前範圍（這是角度controller最適合的）來處理這些點擊。

從評論角度來看，最神奇的功能之一就是您不依賴DOM來維護狀態，而是將其全部存儲在範圍內。如果你想改變某些東西，你可以修改範圍，讓渲染/事件委託/ etc在整個框架中自行處理。

這是一個非常粗略的例子，我沒有在瀏覽器中測試過它，但它的角度相當典型。

的HTML：

<div ng-controller="ExamplePagingController"> 
    <div class="previous" ng-click="previousPage()" ng-class="{ disabled: currentPage == 0 }"></div> 
    <ul ng-repeat="(idx, page) in pagedItems" ng-show="idx == currentPage"> 
     <li ng-repeat="item in page">{{ item.someDisplayProperty }}</li> 
    </ul> 
    <div class="next" ng-click="nextPage()" ng-class="{ disabled: pagedItems.length == 0 || currentPage == pagedItems.length - 1 }"></div> 
</div>

角的東西：

var exampleModule = angular.module('myAppName', []); 

exampleModule .controller('ExamplePagingController', ['$scope', function ($scope) { 
    $scope.items = someExternalVariableOrAngularServiceCall(); 
    $scope.currentPage = 0; 
    $scope.pageSize = 5; 
    $scope.pagedItems = []; 

    $scope.groupToPages = function() { 
     $scope.pagedItems = []; 
     for (var i = 0; i < $scope.items.length; i += 1) { 
      var pageIndex = Math.floor(i/$scope.pageSize); 
      if (i % $scope.pageSize === 0) { 
       $scope.pagedItems[pageIndex] = [$scope.items[i]]; 
      } else { 
       $scope.pagedItems[pageIndex].push($scope.items[i]); 
      } 
     } 
    }; 

    $scope.previousPage = function() { 
     if ($scope.currentPage > 0) { 
      $scope.currentPage -= 1; 
     } 
    }; 

    $scope.nextPage = function() { 
     if ($scope.currentPage < $scope.pagedItems.length - 1) { 
      $scope.currentPage += 1; 
     } 
    }; 

    $scope.groupToPages(); 
}]);

來源

2013-03-22 21:46:15

謝謝尼克。你能給我一個搜索詞，幫助我學習如何做'點擊下一個有效的項目組'魔術我能用Jquery做什麼？ – 2013-03-22 21:52:11

一般來說，角度不是你想要做的，而是你想編輯模型（範圍），並讓框架接管更新你的dom。由於這是在做分頁，因此我會在短時間內給你一個小例子（打出來的時間）。 – 2013-03-22 21:54:31

非常感謝我的朋友！ – 2013-03-22 21:56:46

您需要爲DOM查詢提供更多上下文，因爲它們是動態創建的。您還應該在更高版本的jQuery中使用.on語法。 http://api.jquery.com/on/

$(document).on('click', '.nextButton', function() { 
    //your code 
});

來源

2013-03-22 21:36:09 Jack

非常感謝@Jack。人們似乎反對使用任何Jquery，Angular中的很多代碼都是爲了避免使用JQuery，但我試圖看看現在在哪裏畫線。 – 2013-03-23 14:06:00

如何強制jQuery識別動態創建的AngularJS元素？

回答

相關問題