Angular指令引发双向数据绑定

Question

I'm adapting this jQuery autocomplete plugin into a directive - https://github.com/devbridge/jQuery-Autocomplete .

I have a directive that works:

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

However, when I select something in the autocomplete list, the two way data-binding messes up, and only the input is updated.

Any ideas on how to fix this?

Answer 1

Necroposting this one, because I think it could be useful for many people to know about this great post I'm referring to :)

Angular has a way to observe changes in our objects that relies on the "turn-based" nature of JavaScript. This is explained very clearly in this awesome article by Jim Hoskins .

Basically, Angular checks for changes in cycles, but when something changes in between those cycles, it has no way to know that it needs to perform its checks again! (VERY simplicistic explaination; again, refer to the article )

Bottom line, we need to inform it that we changed something, so let's say your selection triggers an handler() that performs an action()

You simply need to wrap the action into a $scope.$apply

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