dans angularjs comment accéder à l'élément qui a déclenché l'événement ?

Question

J'utilise à la fois Bootstrap et AngularJS dans mon application web. J'ai quelques difficultés à faire fonctionner les deux ensemble.

J'ai un élément, qui a l'attribut data-provide="typeahead"

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

Et je veux mettre à jour le data-source lorsque l'utilisateur saisit des données dans le champ. La fonction updateTypeahead est déclenché correctement, mais je n'ai pas accès à l'élément qui a déclenché l'événement, à moins que j'utilise la fonction $('#searchText') C'est la méthode jQuery, pas la méthode AngularJS.

Quel est le meilleur moyen de faire fonctionner AngularJS avec un module JS de style ancien ?

Answer 1

La méthode générale d'Angular pour accéder à un élément qui a déclenché un événement est d'écrire une directive et de lier() l'événement souhaité :

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

ou avec DDO (selon le commentaire de @tpartee ci-dessous) :

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

La directive ci-dessus peut être utilisée comme suit :

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

Plunker .

Tapez dans le champ de texte, puis laissez/blanchissez. La fonction de rappel de modification se déclenche. Dans cette fonction de rappel, vous avez accès aux éléments suivants element .

Certaines directives intégrées permettent de passer un objet $event. Par exemple, ng-*click, ng-Mouse*. Notez que ng-change ne supporte pas cet événement.

Bien que vous puissiez obtenir l'élément via l'objet $event :

<button ng-click="clickit($event)">Hello</button>

$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...

cela va "profondément à l'encontre de la manière Angular" -- Misko .

Answer 2

 updateTypeahead(this)

ne passera pas l'élément DOM à la fonction updateTypeahead(this) . Ici this fera référence à la portée. Si vous voulez accéder à l'élément DOM, utilisez updateTypeahead($event) . Dans la fonction de rappel, vous pouvez obtenir l'élément DOM par event.target .

Remarque : la fonction ng-change ne permet pas de passer $event comme variable.

Answer 3

Vous pouvez obtenir facilement comme ceci d'abord événement d'écriture sur un élément

ng-focus="myfunction(this)"

y dans votre fichier js comme ci-dessous

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

Je l'ai également utilisé.

Answer 4

Il existe une solution utilisant $element dans le contrôleur si vous ne voulez pas créer une autre directive pour ce problème :

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

Et cela fonctionnera avec ng-change :

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

Answer 5

Si vous voulez la valeur de ng-model, si vous pouvez écrire comme ceci dans l'événement déclenché : $scope.searchText