내 웹 앱에서 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)">