Jak zdobyć element za pomocą nazwy klasy lub identyfikatora

125

Próbuję znaleźć element w html przez angularjs.

Oto html:

<button class="btn btn-primary multi-files" type="button">
   <span>Choose multiple files</span>
</button>
<br/><br/>
<input ng-file-select type="file" multiple  style="display: none"/><br/>

Próbuję uzyskać element przycisku na podstawie wielu plików z nazwą klasy, a potem próbowałem

var multibutton = angular.element(element.getElementsByClassName(".multi-files"));

Ale to nie działa i próbowałem, element.findale działa tylko dla tagu.

Czy jest jakaś funkcja, która może pobrać element przez id lub nazwę klasy w angularjs?

Justin
źródło
Może to pomoże: stackoverflow.com/questions/20801843/…
Wim Deblauwe
Nie musisz nawet tworzyć dyrektywy… możesz po prostu dodać moduł obsługi, taki jak ng-click. W najgorszym przypadku, jeśli naprawdę chcesz uzyskać element, zawsze możesz użyć składni jQuery.
Lucas Holt

Odpowiedzi:

187

getElementsByClassNamejest funkcją w dokumencie DOM. Nie jest to funkcja jQuery ani jqLite.

Nie dodawaj kropki przed nazwą klasy podczas jej używania:

var result = document.getElementsByClassName("multi-files");

Owiń go w jqLite (lub jQuery, jeśli jQuery jest ładowany przed Angular):

var wrappedResult = angular.element(result);

Jeśli chcesz wybrać z elementfunkcji link w dyrektywie, musisz uzyskać dostęp do odwołania DOM zamiast odwołania do jqLite - element[0]zamiast element:

link: function (scope, element, attrs) {

  var elementResult = element[0].getElementsByClassName('multi-files');
}

Alternatywnie możesz skorzystać z document.querySelectorfunkcji (w przypadku wyboru według zajęć potrzebna jest kropka):

var queryResult = element[0].querySelector('.multi-files');
var wrappedQueryResult = angular.element(queryResult);

Demo: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

tasseKATT
źródło
1
Warto zauważyć, że wewnątrz funkcji link element.childElementCount może mieć wartość 0, ponieważ angular nie miał jeszcze okazji do tworzenia elementów, więc należy być przygotowanym na brak wyników dla elementu [0] .getElement .. ,
Dylanthepiguy,
27

Nie musisz dodawać .in getElementsByClassName, tj

var multibutton = angular.element(element.getElementsByClassName("multi-files"));

Jednak podczas używania angular.elementmusisz używać selektorów stylu jquery:

angular.element('.multi-files');

powinien załatwić sprawę.

Również z tej dokumentacji „Jeśli jQuery jest dostępne, angular.element jest aliasem dla funkcji jQuery. Jeśli jQuery nie jest dostępne, angular.element deleguje do wbudowanego w Angulara podzbioru jQuery, zwanego„ jQuery lite ”lub„ jqLite. „”

Ashesh
źródło
cześć, dzięki za odpowiedź, próbowałem, ale błąd mówi o niezdefiniowanej funkcji
Justin
To może zadziałać lub nie, tak. Sprawdź teraz moją odpowiedź (dokonałem edycji) i prawdopodobnie będziesz wiedział, co robić.
Ashesh
Jeśli funkcja jest niezdefiniowana, prawdopodobnie nie załadowałeś jquery. jqlite (który jest używany, jeśli nie załadowałeś jquery, jak wspomniał @Ashesh) nie ma wszystkich funkcji, które ma jquery, a jedną z nich jest getElementsByClassName.
haimlit
5
angular.element ('multi-pliki'); nie zadziała. Potrzebujesz okresu.
Philippe Gioseffi
var multibutton = angular.element (document.getElementsByClassName ("wiele plików"));
Salman Lone
20

Odpowiedź @ tasseKATT jest świetna, ale jeśli nie chcesz tworzyć dyrektywy, dlaczego nie użyć $document?

.controller('ExampleController', ['$scope', '$document', function($scope, $document) {
  var dumb = function (id) {
  var queryResult = $document[0].getElementById(id)
  var wrappedID = angular.element(queryResult);
  return wrappedID;
};

PLUNKR

Ari
źródło
2
angular.element('#Your element id')wykonuje tę samą pracę.
gabbler
3
Daje ten błąd w kątowym 1.5.8. „Wyszukiwanie elementów za pomocą selektorów nie jest obsługiwane przez jqLite”
SP Singh
-4

Jeśli chcesz znaleźć przycisk tylko po nazwie klasy i używając tylko jQLite, możesz zrobić to, co poniżej:

var myListButton = $document.find('button').filter(function() {
    return angular.element(this).hasClass('multi-files');
});

Mam nadzieję że to pomoże. :)

Debayan Das
źródło
1
To nie jest użycie angular i jquery, również niepoprawne wyrażenie, rzeczywiście MOŻESZ użyć jquery, aby zastąpić jqlite. Jest to poprawny sposób na zrobienie tego w środowisku kątowym, bez przechodzenia do podstawowego elementu javascript ($ document [0]).
Dennis Bartlett