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？或其他方法？

谢谢你的帮助:)

4

1 回答 1

2

您应该尝试使用 $scope.$apply 函数包装您的“选择”回调。

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

您可以在Scope Docs中阅读有关 $apply 函数的更多信息。

于 2013-02-26T17:29:54.777 回答