Sự cố với jQuery tự động hoàn thành + AngularJS

Question

Tôi đang sử dụng AjgularJS trên trang của mình và muốn thêm trường để sử dụng tự động hoàn thành từ jqueryui và tính năng tự động hoàn tất không kích hoạt cuộc gọi ajax.

Tôi đã thử nghiệm tập lệnh trên trang không có góc (ng-app và ng-controller) và nó hoạt động tốt, nhưng khi tôi đặt tập lệnh trên trang có angularj thì nó ngừng hoạt động.

bất kỳ ý tưởng nào?

jquery kịch bản:

$(function() { 

    $('#txtProduct').autocomplete({ 
     source: function (request, response) { 

      alert(request.term); 

     }, 
     minLength: 3, 
     select: function (event, ui) { 

     } 
    }); 

}); 

• lưu ý thú vị: khi tôi gọi kịch bản trên Chrome thanh tra autocomplete bắt đầu làm việc !!!
• phiên bản: AngularJS: 1.0.2 - jQueryUI: 1.9.0

KẾT LUẬN: Các widget autocomplete từ jQueryUI phải khởi từ bên trong một chỉ thị tùy chỉnh của AngularJS như ví dụ:

Markup

<div ng-app="TestApp"> 
    <h2>index</h2> 
    <div ng-controller="TestCtrl"> 

     <input type="text" auto-complete>ddd</input> 

    </div> 
</div> 

kịch bản kiễu góc

<script type="text/javascript"> 

    var app = angular.module('TestApp', []); 

    function TestCtrl($scope) { } 

    app.directive('autoComplete', function() { 
     return function postLink(scope, iElement, iAttrs) { 

      $(function() { 
       $(iElement).autocomplete({ 
        source: function (req, resp) { 
         alert(req.term); 
        } 
       }); 
      }); 

     } 
    }); 

</script> 

Answer 1

Có lẽ bạn chỉ cần làm điều đó trong một "cách góc cạnh" ... có nghĩa là, để sử dụng một chỉ thị để thiết lập các yếu tố DOM của bạn và làm cam kết ràng buộc sự kiện, sử dụng dịch vụ để có được dữ liệu của bạn, và sử dụng một bộ điều khiển để làm logic kinh doanh của bạn ... tất cả trong khi tận dụng sự tốt lành dependency injection đó là góc ...

một dịch vụ để có được dữ liệu autocomplete của bạn ...

app.factory('autoCompleteDataService', [function() { 
    return { 
     getSource: function() { 
      //this is where you'd set up your source... could be an external source, I suppose. 'something.php' 
      return ['apples', 'oranges', 'bananas']; 
     } 
    } 
}]); 

một chỉ thị để làm công việc thiết lập plugin tự động hoàn tất.

app.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 
      }); 
     } 
    }; 
}); 

Và sử dụng nó trong đánh dấu của bạn ... hãy chú ý đến mô hình ng để đặt giá trị trên phạm vi $ với những gì bạn chọn.

<div ng-controller="Ctrl1"> 
    <input type="text" ng-model="foo" auto-complete/> 
    Foo = {{foo}} 
</div> 

Đó chỉ là những điều cơ bản, nhưng hy vọng điều đó sẽ hữu ích.

Answer 2

Tôi phải làm nhiều việc hơn một chút để làm việc này bằng cách sử dụng dịch vụ $ http.

Các dịch vụ:

app.factory("AutoCompleteService", ["$http", function ($http) { 
    return { 
     search: function (term) { 
      return $http.get("http://YourServiceUrl.com/" + term).then(function (response) { 
       return response.data; 
      }); 
     } 
    }; 
}]); 

Chỉ thị:

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) { 
    return { 
     restrict: "A", 
     link: function (scope, elem, attr, ctrl) { 
      elem.autocomplete({ 
       source: function (searchTerm, response) { 
        AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) { 
         response($.map(autocompleteResults, function (autocompleteResult) { 
          return { 
           label: autocompleteResult.YourDisplayProperty, 
           value: autocompleteResult 
          } 
         })) 
        }); 
       }, 
       minLength: 3, 
       select: function (event, selectedItem) { 
        // Do something with the selected item, e.g. 
        scope.yourObject= selectedItem.item.value; 
        scope.$apply(); 
        event.preventDefault(); 
       } 
      }); 
     } 
    }; 
}]); 

Các html:

<input ng-model="YourObject" autocomplete />