Есть ли конфликт между jQuery UI «autocompleteselect» и событием AngularJs?

Question

Хотелось бы узнать, существует ли известный конфликт между jQuery UI «автокомплексором» и некоторым событием 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? или другой метод?

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

Answer 1

Вы должны попробовать оборачивать ваш «выбрать» обратный вызов с $ рамки. $ Применять функцию.

... 
    select : function(event, ui){ 
    scope.$apply(function(){ 
     scope.fruit = ui.item; // Stores the selected fruit 
     scope.addFruit(); // Perform addFruit() 
    }); 
    }, 
    ... 

Подробнее о функции $ apply можно узнать в Scope Docs.