4

情况： 我正在移植，或者我应该说尝试将 Lakshan Perera 的 Simple jQuery ColorPicker (https://github.com/laktek/really-simple-color-picker) 移植到 Angular。在查看了 SO 上的类似问题之后，似乎有些人通过控制器分配插件的范围，但正确的（Angular）方法是将插件包装在指令中。我越来越近了。我能够通过我的新自定义属性在我的视图中正确呈现插件，但我不确定如何设置指令以将输入值传递给属性的值（一个 ng 模型）。实际的输入更新，但 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
    }   

});

问题： 我该如何设置属性值来捕捉元素的更新值？

4

1 回答 1

6

我会这样实现它：

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/

jsFiddle 使用隔离范围将范围值绑定color到传入color-picker属性的任何内容。我们$watch用表达式'color'来查看这个值何时发生变化，并适当地更新颜色选择器。

于 2012-11-27T07:09:32.290 回答