推jQuery插件的输入值在AngularJS模型 [英] Pushing jQuery plugin input value to a model in AngularJS

问题描述

情况：
我移植过来，或者我应该说的尝试的端口Lakshan佩雷拉的简单的jQuery颜色拾取（https://github.com/laktek/really-simple-color-picker）到角。关于审查类似问题后，所以它看起来像有些人分配通过控制器插件的范围，但正确的（角）的方式来做到这一点是通过包装插件的指令。我越来越近。我能够通过我的新的自定义属性正确呈现在我看来，插件，但我不知道如何设置的指令，通过输入值属性的值（NG-模型）。实际输入更新，但角度不听的变化，因此实际上是不知道该输入值已更新。建立自定义的官方文档了会谈属性（http://docs.angularjs.org/guide/directive），但我还是无法弄清楚如何我其实看在元素的变化，然后该值推该属性的值。

Situation: I'm porting over, or should I say attempting to port Lakshan Perera's Simple jQuery ColorPicker (https://github.com/laktek/really-simple-color-picker) over to Angular. After reviewing similar problems on SO it seems like some folks assign the scope of the plugin through the controller, but the proper (Angular) way to do this is by wrapping the plug-in in a directive. I'm getting close. I'm able to properly render the plug-in in my view via my new custom attribute, but I'm not sure how to set up the directive to pass the input value to attribute's value (an ng-model). The actual input updates, but the Angular isn't listening for a change and so is in effect unaware that the input value has been updated. The official documentation talks about setting up custom attributes here (http://docs.angularjs.org/guide/directive), but I still was unable to figure out how to I actually watch a change in the element and then push that value to the attribute's value.

所需的功能 -

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

});

问：
赫克我如何设置属性值赶上元素的更新值？

Question: How the heck do I set up the attribute value to catch the element's updated value?

推荐答案

我要实现它是这样的：

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 /

Here is a working jsFiddle, with a few little widgets to toy with: http://jsfiddle.net/BinaryMuse/x2uwQ/

本的jsfiddle采用了分离范围绑定颜色来无论是在传递到颜色选择器属性。我们 $观看除权pression 颜色时看到这个值的变化，并更新颜色选择器适当。

The jsFiddle uses an isolate scope to bind a scope value color to whatever was passed in to the color-picker attribute. We $watch the expression 'color' to see when this value changes, and update the color picker appropriately.

这篇关于推jQuery插件的输入值在AngularJS模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！