Question

情况： 我正在移植，或者我应该说尝试将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
    }   

});

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

Answer 1

我会像这样实现它：

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'以查看此值何时更改，并相应地更新颜色选择器。

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

1 个答案: