我尝试将 Angular 与 JQuery 自动完成插件一起使用。 我在自动完成中选择选项后更新父范围的问题。 两种方式绑定(bind)适用于通过键盘插入文本，但不适用于 JS。
我在 StackOverflow 上发现了一些类似的问题，但看起来它不适合我。 我尝试使用 $scope.$apply 或触发“输入”事件，但它不起作用。 你可以在这里找到我的 Javascript 和 html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js"></script>
<link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script>
var app = angular.module('testApplication', []);
app.directive('ngAutocomplete', function () {
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return {
restrict: 'A',
transclude: true,
link: function (scope, iElement, iAttrs) {
$(iElement).autocomplete(months).
on("result", function (event, result) {
console.log(result[0])
scope.$apply();
$(iElement).trigger('input');
});
}
}
});
app.controller('testController', function ($scope) {
$scope.EditModel = {};
$scope.EditModel.Customer = "";
});
</script>
</head>
<body>
<div ng-app="testApplication" ng-controller="testController">
Month:
<input ng-autocomplete ng-model="EditModel.Customer" />
<input ng-model="EditModel.Customer" />
</div>
</body>
</html>
在这里你可以找到我的例子:
http://plnkr.co/edit/u21NSJDlaW1bAkUjOMtB
提前致谢，抱歉我的英语不好!
最佳答案
实现此目的的最佳方法是要求指令中的 ngModel Controller 在用户选择某个项目时手动设置模型 View 值。这是一个正在工作的笨蛋:http://plnkr.co/edit/wBgmJ163X6kATKypuTrS?p=preview
神奇的事情发生在你的结果回调中:
scope.$apply(function () {
ngModelCtrl.$setViewValue(result[0]);
});
要使用 ngModelCtrl，您必须通过 require : 'ngModel' 在指令中要求它，并将 Controller 设置为 link 方法。
关于AngularJs 两种方式绑定(bind)不适用于 Jquery 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24247031/