自定义ngModel指令以支持jquery插件中的model-＆gt;视图绑定

Question

我正在用标签输入的jquery插件来装饰标准文本输入，这实际上取代了我的HTML中的文本输入，其中文本区域用户可以编写标签名称并按Enter键将它们转换为离散图形标签。 （参见http://xoxco.com/projects/code/tagsinput/演示文稿）

我在原始文本输入中放置了一个ngModel指令。

通过从插件中侦听更改处理程序，从原始文本输入html标记解析ngModel属性，并直接更新范围，我能够通过标记输入字段中所做的更改来更新范围。

然而，问题在于当Angular检测到模型中的更改并使用绑定更新视图时，它会在原始文本输入上设置值，这不会导致我可以绑定的任何类型的事件以了解何时更新插件的值，因为“更改”仅在用户输入时触发。

有没有办法修改默认的ngModel指令行为，让它触发事件或运行我在处理绑定时指定的函数，特别是从模型到视图？

Answer 1

您需要覆盖ngModel。$ render function

directive.tabbable = function() {
  return {
    require: 'ng-model',
    link: function(scope, element, attrs, ngModel) {
      // do work to register the jQuery widget
      ngModel.$render = function() {
        // read ngModel.$viewValue and update the jQuery widget with it.
      }
    }
  };
};