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

你应该尝试使用$ scope包装你的'select'回调。$ apply function。

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

您可以在Scope Docs中详细了解$ apply函数。

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

1 个答案: