angularjs 단위로 이벤트를 트리거한 요소에 접근하는 방법

angularjs 단위로 이벤트를 트리거한 요소에 접근하는 방법

부트스트랩과 앵귤러 모두 사용내 웹 앱에 JS가 있어.두 사람을 함께 일하게 하는 데 어려움을 겪고 있어요.

요소를 하나 가지고 있는데, 그 요소는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')이것은 각도가 아닌 jQuery 방식입니다.JS웨이

Angular를 얻는 가장 좋은 방법은?JS는 이전 스타일의 JS 모듈과 함께 작동합니다.

이벤트를 트리거한 요소에 대한 액세스를 얻기 위한 일반적인 Angular 방법은 원하는 이벤트에 디렉티브와 바인드()를 쓰는 것입니다.

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-*클릭, ng-Mouse*ng-change는 이 이벤트를 지원하지 않습니다.

$event 객체를 통해 요소를 가져올 수 있지만,

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

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

이것은 "각진 길을 향해 깊이"--미스코.

 updateTypeahead(this)

DOM 요소를 함수에 전달하지 않음updateTypeahead(this).여기서this는 스코프를 참조합니다.DOM 요소에 액세스 하려면 , 를 사용합니다. 콜백 함수에서는, DOM 요소를 로 취득할 수 있습니다.

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

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

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 값을 원하는 경우 트리거된 이벤트에서 다음과 같이 쓸 수 있는 경우: $120검색 텍스트

어떤 버전을 사용하셨는지 모르겠지만, 이 질문은 오래전에 한 질문입니다.현재 Angular 1.5를 사용하면ng-keypress이벤트 및debounceLodash의 기능을 통해 다음과 같은 유사한 동작을 에뮬레이트할 수 있습니다.ng-change$이벤트를 캡처할 수 있습니다.

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

$control.edit = _.controlounce(함수 $event) {console.logsigns$event", $event) }, 800)

언급URL : https://stackoverflow.com/questions/12994710/in-angularjs-how-to-access-the-element-that-triggered-the-event