Я использую как 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'), который является способом jQuery, а не способом AngularJS.
Каков наилучший способ заставить 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 я могу использовать функцию ng-keypress и debounce из Lodash для эмуляции аналогичного поведения, такого как ng-change, поэтому я могу захватить $event
<input type="text" ng-keypress="edit($event)" ng-model="myModel">
$scope.edit = _.debounce(function ($ event) { console.log( "$ event", $event) }, 800)