问题描述
我试图将jQuery的minicolors在角directive.The指令绑定与ngModel一个文本框。当我输入的颜色code,更改的值由表检测,但是当我选择使用颜色拾取它的价值不是体现在范围variable.Can任何一个告诉我,我究竟做错了什么?
<输入minicolors =colorPickerSettings类型=文本数据-NG-模式=category.ToBeConfirmedEventColor>
棱角分明。
模块('对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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!