情况：我正在移植，或者我应该说尝试将 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
}
});
问题：我到底如何设置属性值来捕获元素的更新值？
我会这样实现它：
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/ http://jsfiddle.net/BinaryMuse/x2uwQ/
jsFiddle 使用隔离范围来绑定范围值color无论传递给什么color-picker属性。我们$watch表达方式'color'查看此值何时发生变化，并适当更新颜色选择器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
