Jquery 自动完成和 ng-show答案

【问题标题】：Jquery Autocomplete and ng-showJquery 自动完成和 ng-show
【发布时间】：2014-02-11 13:20:45
【问题描述】：

在纯粹主义者攻击我之前，我知道以我的方式将 jquery 和 Angular 结合起来并不“正确”

继续表演。

我有一个带有 jQueryUI 自动完成功能的文本框。这很好用！我还有一个带有 ng-show 属性的按钮，用于评估文本框中条目的有效性。如果我手动输入名称，这也可以正常工作。然而。如果我开始输入然后单击自动完成条目 - ng-show 函数不会评估。然后我必须手动在文本框的末尾添加一个空格或其他内容以强制它运行。

关于如何让 ng-show 与 jQueryUI 自动完成功能一起工作的任何想法？

<p><input id="txtUniqueUser" ng-model="selectedUserName" name="UniqueUser" type="text" placeholder="Search For User" class="input-xlarge" style="width:80%"></p>
<p ng-show="isValidName()"><button type="button" ng-model="selectedUserName" class="btn btn-primary btn-lg">Begin!</button></p>

$scope.isValidName = function(){
        if($scope.uniqueDisplaynames.indexOf($scope.selectedUserName) != -1)
            return true;
        else
            return false;
    };

我添加了这个以使其工作：

$('#txtUniqueUser').on("autocompletechange",function(event,ui)
            {
                $scope.selectedUserName = $('#txtUniqueUser')[0].value;
                $scope.$apply();
                $scope.isValidName();
            });


ARApp.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
                    // elem is a jquery lite object if jquery is not present,
                    // but with jquery and jquery ui, it will be a full jquery object.
            elem.autocomplete({
                source: autoCompleteDataService.getSource(), //from your service
                minLength: 2
            });
        }
    };
});

ARApp.factory('autoCompleteDataService', [function($scope) {
    return {
        getSource: function($scope) {

            return [$scope.uniqueDisplaynames];
        }
    }
}]);

【问题讨论】：

标签： javascript jquery jquery-ui angularjs autocomplete

【解决方案1】：

这是因为由于输入的值是被jQuery修改的，所以angularjs不知道这些变化。

免责声明：未经测试

AngularJS 使用 $digest 循环对范围变量所做的更改做出反应，因此当自动完成更改输入元素的值时，这些值不会被复制到与其关联的模型对象中。

一个简单的解决方法应该是在元素的autocomplete change event 上触发change event

【讨论】：