jQuery UI“autocompleteselect”事件和AngularJs事件之间是否存在冲突？

Question

我想知道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已更新。所以似乎某处发生了“变更”事件。

也许你们中的一些人遇到过这种情况，或者我只是在我的代码中某处丢失了一点。也许我应该使用$watch？或另一种方法？

感谢您的帮助:)

Answer 1

你应该尝试用包装$范围的“选择”回调。$应用功能。

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

您可以在Scope Docs了解更多关于$ apply功能的信息。