javascript - 自定义 ngModel 指令以支持 jquery 插件中的模型-> View 绑定(bind)

Question

我正在使用标签输入的 jquery 插件装饰标准文本输入，它基本上用文本区域替换了我的 HTML 中的文本输入，用户可以在文本区域中输入标签名称并按回车键将它们转换为离散的图形标签。 (参见 http://xoxco.com/projects/code/tagsinput/ 的演示)

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

我可以通过监听插件中的更改处理程序、从原始文本输入 html 标记中解析 ngModel 属性并直接更新范围，使我的范围随着标签输入字段中所做的更改而更新。

但是，问题在于，当 Angular 检测到模型中的更改并使用绑定(bind)更新 View 时，它会在原始文本输入上设置值，这不会导致我可以绑定(bind)到的任何类型的事件来知道何时更新插件的值，因为“更改”仅在用户输入时触发。

有没有办法修改默认的 ngModel 指令行为，使其在处理绑定(bind)时触发事件或运行我指定的函数，特别是从模型到 View ？

Answer 1

你需要覆盖 ngModel.$render 函数

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