W mojej aplikacji internetowej używam zarówno Bootstrap, jak i AngularJS. Mam pewne trudności ze zmobilizowaniem tych dwóch do współpracy.
Mam element, który ma atrybut data-provide="typeahead"
<input id="searchText" ng-model="searchText" type="text"
class="input-medium search-query" placeholder="title"
data-provide="typeahead" ng-change="updateTypeahead()" />
Chcę zaktualizować data-source
atrybut, gdy użytkownik wprowadzi dane w polu. Funkcja updateTypeahead
jest wyzwalana poprawnie, ale nie mam dostępu do elementu, który wyzwolił zdarzenie, chyba że używam $('#searchText')
, co jest sposobem jQuery, a nie sposobem AngularJS.
Jaki jest najlepszy sposób, aby AngularJS działał ze starym modułem JS.
źródło
<li ng-repeat="item in items" role="menuitem" ng-class="{\'selected\' : isSelected($event, item)}">
Ogólnym sposobem Angulara na uzyskanie dostępu do elementu, który wywołał zdarzenie, jest napisanie dyrektywy i powiązanie () z żądanym zdarzeniem:
app.directive('myChange', function() { return function(scope, element) { element.bind('change', function() { alert('change on ' + element); }); }; });
lub z DDO (zgodnie z komentarzem @ tpartee poniżej):
app.directive('myChange', function() { return { link: function link(scope, element) { element.bind('change', function() { alert('change on ' + element); }); } } });
Powyższa dyrektywa może być używana w następujący sposób:
<input id="searchText" ng-model="searchText" type="text" my-change>
Plunker .
Wpisz tekst w polu tekstowym, a następnie pozostaw / zamaż. Funkcja wywołania zwrotnego zmiany zostanie uruchomiona. Wewnątrz tej funkcji zwrotnej masz dostęp do
element
.Niektóre dyrektywy wbudowane obsługują przekazywanie obiektu $ event. Np. Ng- * klik, ng-Mouse *. Zauważ, że ng-change nie obsługuje tego zdarzenia.
Chociaż możesz pobrać element za pośrednictwem obiektu $ event:
<button ng-click="clickit($event)">Hello</button> $scope.clickit = function(e) { var elem = angular.element(e.srcElement); ...
to idzie „głęboko pod Angular” - Misko .
źródło
możesz łatwo uzyskać takie pierwsze zdarzenie write na elemencie
ng-focus="myfunction(this)"
i w swoim pliku js, jak poniżej
$scope.myfunction= function (msg, $event) { var el = event.target console.log(el); }
Ja też go użyłem.
źródło
Istnieje rozwiązanie wykorzystujące $ element w kontrolerze, jeśli nie chcesz tworzyć kolejnej dyrektywy dla tego problemu:
appControllers.controller('YourCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) { $scope.updateTypeahead = function() { // ... some logic here $timeout(function() { $element[0].getElementsByClassName('search-query')[0].focus(); // if you have unique id you can use $window instead of $element: // $window.document.getElementById('searchText').focus(); }); } }]);
I to zadziała z ng-change :
<input id="searchText" type="text" class="search-query" ng-change="updateTypeahead()" ng-model="searchText" />
źródło
jeśli chcesz wartość modelu ng, jeśli możesz napisać w ten sposób w wyzwalanym zdarzeniu: $ scope.searchText
źródło
Nie jestem pewien, którą wersję miałeś, ale to pytanie zostało zadane dawno temu. Obecnie w Angular 1.5 mogę użyć
ng-keypress
zdarzenia idebounce
funkcji z Lodash do emulacji podobnego zachowaniang-change
, dzięki czemu mogę przechwycić zdarzenie $<input type="text" ng-keypress="edit($event)" ng-model="myModel">
źródło
Aby przekazać element źródłowy w Angular 5:
<input #myInput type="text" (change)="someFunction(myInput)">
źródło