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ものはすぐには更新されません!

そこで、 autocomplete と同じメソッドを起動する「追加」ボタンを追加しようとしましたselect。このような ：

<button type="submit" ng-click="addFruit()">
    Add
</button>

がクリックされるscope.addFruit()と、驚くべきことに、tableすぐに更新されます。

検索したところ、オートコンプリート リストで何かを選択し、オートコンプリート フィールドに何かを入力すると、table更新されることがわかりました。ということで、どこかで「on change」イベントで何かが起きているようです。

この状況を経験したことがある人もいるかもしれませんし、コードのどこかでポイントが抜けているだけかもしれません。多分私は使用する必要があります$watchか？または別の方法？

助けてくれてありがとう:)

4

1 に答える 1

2

「select」コールバックを $scope.$apply 関数でラップしてみてください。

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

$apply 関数の詳細については、Scope Docsを参照してください。

于 2013-02-26T17:29:54.777 に答える