将 jQuery 插件输入值推送到 AngularJS 中的模型

情况：我正在移植，或者我应该说尝试将 Lakshan Perera 的 Simple jQuery ColorPicker (https://github.com/laktek/really-simple-color-picker) 移植到 Angular。在查看了 SO 上的类似问题后，似乎有些人通过控制器分配插件的范围，但正确的（Angular）方法是将插件包装在指令中。我已经接近了。我能够通过新的自定义属性在我的视图中正确渲染插件，但我不确定如何设置指令以将输入值传递给属性的值（ng-model）。实际的输入会更新，但 Angular 不会侦听更改，因此实际上不知道输入值已更新。官方文档讨论了在这里设置自定义属性（http://docs.angularjs.org/guide/directive），但我仍然无法弄清楚如何实际观察元素中的更改，然后将该值推送到属性的值。

所需功能 -

<input my-widget="{{color}}" type="text"/> <!-- my-widget instantiates my directive -->
<h1 style="color:{{color}}"></h1>          <!-- I would like the input value to dump into the attribute's value, in this case {{color}} -->

这是我到目前为止所拥有的：

app.directive('myWidget', function(){
    var myLink = function(scope, element, attr) {

        scope.$watch('element',function(){

            var value = element.val();

            element.change(function(){

             console.log(attr.ngModel); // This is currently logging undefined

                     // Push value to attr here? 

                console.log( value + ' was selected');
            });
        });

        var element = $(element).colorPicker();
    }

    return {
        restrict:'A',
        link: myLink
    }   

});

问题：我到底如何设置属性值来捕获元素的更新值？

我会这样实现它：

app.directive('colorPicker', function() {
  return {
    scope: {
      color: '=colorPicker'
    },
    link: function(scope, element, attrs) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the scope whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            scope.color = newValue;
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      scope.$watch('color', function(value) {
        element.val(value);
        element.change();                
      });
    }
  }
});

你会像这样使用它：

<input color-picker="color">

这是一个正在运行的 jsFiddle，其中有一些小部件可供使用：http://jsfiddle.net/BinaryMuse/x2uwQ/ http://jsfiddle.net/BinaryMuse/x2uwQ/

jsFiddle 使用隔离范围来绑定范围值color无论传递给什么color-picker属性。我们$watch表达方式'color'查看此值何时发生变化，并适当更新颜色选择器。