Есть ли конфликт между событием «автозаполнение» пользовательского интерфейса jQuery и событием AngularJs?

0

Я хотел бы знать, есть ли известный конфликт между 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? или другой метод?

Спасибо за помощь :)

Теги:
angularjs-directive

1 ответ

2
Лучший ответ

Вы должны попробовать обернуть свой "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.

  • 0
    Ничего себе спасибо за ваш ответ :) Это прекрасно работает. Я пропустил этот метод, спасибо!
  • 0
    @JulienRodrigues Спасибо, что нашли время написать практичный и отвечающий на вопросы вопрос.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню