使用jQuery minicolors在angular.js [英] using jquery minicolors in angular.js

问题描述

我试图将jQuery的minicolors在角directive.The指令绑定与ngModel一个文本框。当我输入的颜色code，更改的值由表检测，但是当我选择使用颜色拾取它的价值不是体现在范围variable.Can任何一个告诉我，我究竟做错了什么？

 ＆LT;输入minicolors =colorPickerSettings类型=文本数据-NG-模式=category.ToBeConfirmedEventColor＆GT;
棱角分明。
模块（'对myApp'，[]）
.directive（'minicolors'，函数（）{
    返回{
        要求：'ngModel'，
        限制：'A'，
        链接：功能（范围，元素，ATTRS，ngModel）{            //获取设置对象
            VAR的getSettings =功能（）{
                返回angular.extend（{} $范围的eval（attrs.minicolors））;
            };            // init方法
            VAR initMinicolors =功能（）{
              //调试器
                如果（！ngModel）{
                    返回;
                }
                VAR设置=的getSettings（）;                //初始化起始值，如果有一个
                ngModel。$ =渲染功能（）{
                    如果（！范围。$$阶段）{
                        //当前未在$摘要或$应用
                        范围。$应用（函数（）{
                            VAR颜色= ngModel $ viewValue。
                            element.minicolors（'值'，颜色）;
                        }）;
                    }
                };                //如果我们不摧毁旧的不正确更新配置更改时
                element.minicolors（'消灭'）;                //创建新minicolors部件
                element.minicolors（设置）;                //强制渲染覆盖无论是在输入文本框
                。ngModel $渲染（）;
            };            //。观看模式更改，然后再次调用init方法如果发生任何改变
            。范围$腕表（的getSettings，initMinicolors，真正的）;
        }
    };
}）;
 

解决方案

每当改变插件内发生，angular.js不知道这一点。结果
输入工作，因为 ngModel 设置输入元素改变事件的事件侦听。结果
minicolors 触发更改事件，因此您可以注册一个事件侦听器来更新模型。

看看在文档。

  element.minicolors（{
  值：颜色，
  改变：函数（十六进制，不透明度）{
    //更新模型
  }
}）;
 

I am trying to incorporate jquery minicolors in an angular directive.The directive is binded to a textbox with ngModel. When I type the color code,the changed value is detected by the watch,but when I select it using colorpicker,the value is not reflected in the scope variable.Can any one tell me what am I doing wrong?

<input minicolors="colorPickerSettings" type="text" data-ng-model="category.ToBeConfirmedEventColor">


angular.
module('myApp', [])
.directive('minicolors', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {            

            //gets the settings object
            var getSettings = function () {                    
                return angular.extend({}, scope.$eval(attrs.minicolors));
            };

            //init method
            var initMinicolors = function () {
              //  debugger
                if (!ngModel) {
                    return;
                }
                var settings = getSettings();

                //initialize the starting value, if there is one
                ngModel.$render = function () {
                    if (!scope.$$phase) {
                        //not currently in $digest or $apply
                        scope.$apply(function () {
                            var color = ngModel.$viewValue;
                            element.minicolors('value', color);
                        });
                    }
                };

                // If we don't destroy the old one it doesn't update properly when the config changes
                element.minicolors('destroy');

                // Create the new minicolors widget
                element.minicolors(settings);

                // Force a render to override whatever is in the input text box
                ngModel.$render();
            };

            // Watch model for changes  and then call init method again if any change occurs
            scope.$watch(getSettings, initMinicolors, true);
        }
    };
});

解决方案

Whenever a change occurs inside the plugin, angular.js is unaware of it.
The input works because ngModel sets an event listener on the input element change event.
minicolors triggers a change event so you can register an event listener to update the model.

Take a look in the docs.

element.minicolors({
  value: color,
  change: function(hex, opacity) {
    // update the model
  }
});

这篇关于使用jQuery minicolors在angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！