将 jQuery 插件输入值推送到 AngularJS 中的模型 [英] Pushing jQuery plugin input value to a model in 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)，但我仍然无法弄清楚如何实际观察元素中的更改，然后将该值推送到属性的值.

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 使用隔离范围将范围值 color 绑定到传递给 color-picker 属性的任何内容.我们$watch 表达式 'color' 以查看此值何时发生变化，并相应地更新颜色选择器.

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屋！