2014-06-11 14 views
7

Angular JS'ye nispeten yeniyim ve jQuery'yi uzun bir süredir kullanıyorum. Bu yüzden jQuery'yi içimde açısal olarak değiştirmek için zor zamanlar geçiriyorum. : D

DOM sorgulamasını açısal olarak nasıl gerçekleştirebileceğimizi bilmek istiyorum. bir açısal programcı böyle bir şey yapmak nasıl Temelde, ben bir durumla karşı karşıya am kimse bana önerebilir bu

$(".myClass").each(function(){ 
    $(this).doSomething(); 
}) 

böyle bir şey yapmak. angularjs içinde

Teşekkür

+1

(http://stackoverflow.com/questions/14994391/how- İlk önce-i-düşün-in-angularjs-if-i-have-a-jquery-background). – Satpal

cevap

4

DOM manipülasyonları vs denetleyici, hizmetlerde olmamalı ... Ama sen işlemek istiyorsanız bu sadece bir yerde direktifleri ...

olmalıdır DOM Eğer burada ...

angularjs DOM manipülasyonlara hakkında bazı iyi makaleleri olduğunu ... yönergesini kullanmak ve içerideki manipülasyon yapmalıdır

Best Practice - Dom Manipulations

DOM Manipulation in AngularJS — Without jQuery

şimdi en İstediğiniz gibi bir yönerge oluşturmak deneyelim. Öğeleri, sınıfları aracılığıyla seçerek manipüle etmek istediğiniz gibi görünüyor. Tamam sorun yok yani biz

app.directive('myClass',function(){ 
    // Runs during compile 
    return { 
     // name: '', 
     // priority: 1, 
     // terminal: true, 
     // scope: {}, // {} = isolate, true = child, false/undefined = no change 
     // controller: function($scope, $element, $attrs, $transclude) {}, 
     // require: 'ngModel', // Array = multiple requires, ? = optional,^= check parent elements 
     restrict: 'C', // E = Element, A = Attribute, C = Class, M = Comment 
     // template: '', 
     // templateUrl: '', 
     // replace: true, 
     // transclude: true, 
     // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), 
     link: function($scope, iElm, iAttrs, controller) { 
      console.log('Here is your element', iElm); 
        // DO SOMETHING 
     } 
    }; 
}); 

burada PLUNKER olduğu (her şeyi göstermek için ayrıntılı versiyonunu) bir restrict:'C'SINIF anlamına sahiptir yönergesini ... Burada

bizim yönergesi beyanıdır ... oluşturmanız gerekir. ..

2

$('selector') için alternatif angular.element('selector') ve $.each için alternatif angular.forEach şeklindedir. Böylece kod görünür gibi:

var els = angular.element('.myClass'); 
angular.forEach(els, function(el){ 
    angular.element(el).doSomething(); 
}) 
Sen [? Bir jQuery arka plan varsa “angularjs düşünmek” do __How __] geçmesi gerektiğini
+1

"angular.element" öğesinin, açısaldan önce jQuery yüklediyseniz yalnızca seçicileri desteklediğini unutmayın. – tasseKATT