Question

在纯粹主义者攻击我之前，我知道结合jquery和棱角分明我的方式不是“正确”

好的节目。

我有一个附有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];
        }
    }
}]);

Answer 1

因为输入的值是由jQuery修改的，所以angularjs并不知道这些更改。

免责声明：未经测试

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

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

Jquery自动完成和ng-show

1 个答案: