angularjs에서 이벤트를 트리거 한 요소에 액세스하는 방법은 무엇입니까?

내 웹 앱에서 Bootstrap과 AngularJS를 모두 사용합니다. 두 사람이 함께 일하는 데 어려움이 있습니다.

속성이있는 요소가 있습니다. data-provide="typeahead"

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

그리고 data-source사용자가 필드에 입력 할 때 속성 을 업데이트하고 싶습니다 . 함수 updateTypeahead가 올바르게 트리거되지만 $('#searchText')AngularJS 방식이 아닌 jQuery 방식 인을 사용하지 않는 한 이벤트를 트리거 한 요소에 액세스 할 수 없습니다 .

AngularJS가 이전 스타일의 JS 모듈과 함께 작동하도록하는 가장 좋은 방법은 무엇입니까?

 updateTypeahead(this)

DOM 요소를 함수에 전달하지 않습니다 updateTypeahead(this). 여기 this에서 범위를 참조합니다. DOM 요소에 액세스하려면 updateTypeahead($event). 콜백 함수에서 DOM 요소를 event.target.

참고 : ng-change 함수는 $ event를 변수로 전달할 수 없습니다.

이벤트를 트리거 한 요소에 액세스하는 일반적인 Angular 방법은 원하는 이벤트에 지시문과 bind ()를 작성하는 것입니다.

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

또는 DDO (아래 @tpartee의 의견에 따라) :

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

위의 지시문은 다음과 같이 사용할 수 있습니다.

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

플 런커 .

텍스트 필드에 입력 한 다음 그대로 두거나 흐리게합니다. 변경 콜백 함수가 실행됩니다. 해당 콜백 함수 내에서 element.

일부 내장 지시문은 $ event 객체 전달을 지원합니다. 예 : ng- * click, ng-Mouse *. ng-change는이 이벤트를 지원하지 않습니다.

$ event 개체를 통해 요소를 가져올 수 있지만 :

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

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

이것은 "Angular 방식에 대해 깊은" -Misko .

요소에 대한 첫 번째 쓰기 이벤트 처럼 쉽게 얻을 수 있습니다.

ng-focus="myfunction(this)"

그리고 아래와 같이 js 파일에서

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

나는 그것을 또한 사용했습니다.

이 문제에 대해 다른 지시문을 생성하지 않으려면 컨트롤러에서 $ element를 사용하는 솔루션이 있습니다.

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

그리고 이것은 ng-change 와 함께 작동합니다 .

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

ng-model 값을 원한다면 트리거 된 이벤트에 다음과 같이 쓸 수 있다면 $ scope.searchText

어떤 버전을 가지고 있는지 잘 모르겠지만이 질문은 오래 전에 요청되었습니다. 현재 Angular 1.5에서는 Lodash 의 ng-keypress이벤트 및 debounce함수를 사용하여 와 같은 유사한 동작을 에뮬레이션 할 수 있으므로 $ event를 캡처 할 수 있습니다.ng-change

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

$ scope.edit = _.debounce (function ($ event) {console.log ( "$ event", $ event)}, 800)

Angular 5에서 소스 요소를 전달하려면 다음을 수행하십시오.

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