Angular指令引發雙向數據綁定

Question

我正在將此jQuery自動完成插件改編為指令-https: //github.com/devbridge/jQuery-Autocomplete 。

我有一個有效的指令：

App.directive('autocomplete', ->
  return {
    restrict: 'A',
    link: ($scope, elem, attr) ->
      console.log(attr.autocomplete)
      elem.autocomplete({
        serviceUrl: '/videos/autocomplete/' + attr.autocomplete
      })
  }
)

但是，當我在自動完成列表中選擇某項時，兩種方式的數據綁定混亂了，只有輸入被更新了。

有想法該怎么解決這個嗎？

Answer 1

對此死靈化 ，因為我認為這對許多人來說是有用的，我知道我指的是這一篇好文章:)

Angular有一種方法來觀察我們對象中的變化，該方法依賴於JavaScript的“基於回合”性質。 吉姆霍斯金斯（Jim Hoskins）在這篇很棒的文章中對此進行了非常清楚的解釋。

基本上，Angular檢查周期中的變化，但是當這些周期之間發生某些變化時，它無法知道需要再次執行檢查！ （非常簡單的解釋；再次參考該文章 ）

最重要的是，我們需要通知它我們已更改了某些內容，因此，假設您的選擇觸發了一個執行action()的handler() action()

您只需包裹action為$scope.$apply

function handler(){
    $scope.$apply(function(){
        action();
    });
}