Я хотел бы знать, есть ли известный конфликт между jQuery UI "autocompleteselect" и некоторым событием AngularJS?
Вот мой случай: у меня есть таблица и ввод автозаполнения
<label for="addFruit">Add a fruit</label>
<input type="text" fruit-autocomplete ng-model="fruit"/>
<table>
<thead>
<tr>
<th>Label</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruits | orderBy:fruitsOrder">
<td>
{{fruit.label}}
</td>
<td>
<a title="Remove" href="javascript:void(0)" ng-click="rmFruit(fruit)">
Remove
</a>
</td>
</tr>
</tbody>
</table>
Я объявил свою автозаполнение в директиве
app.directive('fruitAutocomplete', ['$http', function($http){
return function(scope, element, attrs){
element.autocomplete({
select : function(event, ui){
scope.fruit = ui.item; // Stores the selected fruit
scope.addFruit(); // Perform addFruit()
},
source: ... //Get my custom Json source
}).data('autocomplete') .... // Render in ul
};
}]);
И вот часть содержимого моего контроллера
/*
* Methods
*/
// Add a fruit method
$scope.addFruit = function(){
this.fruits.push({'label' : 'test'}); // Add a new fruit to fruits
};
// Remove a fruit method
$scope.rmFruit = function(fruitToRemove){
var index = this.fruits.indexOf(fruitToRemove);
this.fruits.splice(index, 1);
};
$scope.fruit = null; // the selected fruit
$scope.fruits = fruitsList; // fruitList is the object containing all the fruits
$scope.fruitsOrder = 'label';
Все работает отлично! За исключением случаев, когда я выбираю что-то в списке автозаполнения. Действительно, когда я выбираю элемент, опция select
хорошо срабатывает, а scope.addFruit()
тоже (мой объект $scope.fruits
обновляется!). Но моя table
не сразу обновляется!
Поэтому я попытался добавить кнопку "Добавить", которая будет запускать тот же метод, что и мой select
автозаполнения. Как это:
<button type="submit" ng-click="addFruit()">
Add
</button>
Когда вы нажимаете scope.addFruit()
, и, что удивительно, моя table
сразу обновляется!
Я искал и обнаружил, что, когда я выбираю что-то в своем списке автозаполнения, а затем набираю что-то в своем поле автозаполнения, моя table
обновляется. Кажется, что-то происходит где-то с событием "on change".
Возможно, некоторые из вас испытали эту ситуацию, или, может быть, я просто упустил точку в моем коде. Может быть, я должен использовать $watch
? или другой метод?
Спасибо за помощь :)
Вы должны попробовать обернуть свой "select" callback с помощью $ scope. $ Apply function.
...
select : function(event, ui){
scope.$apply(function(){
scope.fruit = ui.item; // Stores the selected fruit
scope.addFruit(); // Perform addFruit()
});
},
...
Вы можете больше узнать о функции $ apply в документах Scope.