javascript - queryselector - angularjs select element

en angularjs cómo acceder al elemento que desencadenó el evento?

Question

Uso tanto Bootstrap como AngularJS en mi aplicación web. Tengo algunas dificultades para que los dos trabajen juntos.

Tengo un elemento que tiene el atributo data-provide="typeahead"

<input id="searchText" ng-model="searchText" type="text"
class="input-medium search-query" placeholder="title"
data-provide="typeahead" ng-change="updateTypeahead()" />

Y quiero actualizar el atributo data-source cuando el usuario ingresa en el campo. La función updateTypeahead se desencadena correctamente, pero no tengo acceso al elemento que desencadenó el evento, a menos que use $(''#searchText'') , que es el modo jQuery, no el modo AngularJS.

¿Cuál es la mejor manera de hacer que AngularJS funcione con el antiguo módulo JS de estilo?

Answer 1

Hay una solución que usa $ element en el controlador si no desea crear otra directiva para este problema:

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();
});
}
}]);

Y esto funcionará con ng-change :

<input id="searchText" type="text" class="search-query" ng-change="updateTypeahead()" ng-model="searchText" />

Answer 2

La forma general Angular para obtener acceso a un elemento que desencadenó un evento es escribir una directiva y bind () para el evento deseado:

app.directive(''myChange'', function() {
return function(scope, element) {
element.bind(''change'', function() {
alert(''change on '' + element);
});
};
});

o con DDO (según el comentario de @tpartee a continuación):

app.directive(''myChange'', function() {
return {
link: function link(scope, element) {
element.bind(''change'', function() {
alert(''change on '' + element);
});
}
}
});

La directiva anterior se puede usar de la siguiente manera:

<input id="searchText" ng-model="searchText" type="text" my-change>

Plunker .

Escriba en el campo de texto, luego deje / desenfoque. La función de devolución de llamada se disparará. Dentro de esa función de devolución de llamada, tiene acceso al element .

Algunas directivas incorporadas admiten pasar un objeto $ event. Por ejemplo, ng- * click, ng-Mouse *. Tenga en cuenta que ng-change no admite este evento.

Aunque puede obtener el elemento a través del objeto $ event:

<button ng-click="clickit($event)">Hello</button>
$scope.clickit = function(e) {
var elem = angular.element(e.srcElement);
...

esto va "profundo contra el modo Angular" - Misko .

Answer 3

No estoy seguro de qué versión tenías, pero esta pregunta se hizo hace mucho tiempo. Actualmente con Angular 1.5, puedo usar el evento ng-keypress y la función Lodash de Lodash para emular un comportamiento similar a ng-change , así puedo capturar el evento $

<input type="text" ng-keypress="edit($event)" ng-model="myModel">

$ scope.edit = _.debounce (función ($ evento) {console.log ("$ evento", $ evento)}, 800)

Answer 4

Para pasar el elemento fuente en Angular 5:

<input #myInput type="text" (change)="someFunction(myInput)">

Answer 5

puede obtener fácilmente como este primer evento de escritura en el elemento

ng-focus="myfunction(this)"

y en su archivo js como a continuación

$scope.myfunction= function (msg, $event) {
var el = event.target
console.log(el);
}

Lo he usado también.

Answer 6

si quieres valor de modelo ng, si puedes escribir así en el evento desencadenado: $ scope.searchText

Answer 7

 updateTypeahead(this)

no pasará el elemento DOM a la función updateTypeahead(this) . Aquí this se referirá al alcance. Si desea acceder al elemento DOM, use updateTypeahead($event) . En la función de devolución de llamada puede obtener el elemento DOM por event.target .

Tenga en cuenta: la función ng-change no permite pasar $ event como variable.