Question

我有一个当前设置的json。它的结构是这样的：

{
    color: '#111111',
    opacity: '0.1',
    text_area: {
        color: "#222222"
        opacity: "0.2"
    },
    something_else: {
        color: "#333333",
        opacity: "0.3"
    }
}

然后我在我的页面上有一些输入，用户可以在其中选择颜色值。选择由MiniColors执行。当您定义该用户不仅应该选择颜色而且还应选择不透明度时，minicolors会将选定的不透明度值存储为输入标记中的属性，称为＆＃34; data-opacity＆＃34;。颜色值（十六进制）的存储方式与输入中的任何文本类似。

为了测试一下，我已添加到我的html中：

{{settings.text_area.color}}
{{settings.text_area.opacity}}

我的输入标记如下所示：

<input id="ta" ng-model="settings.text_area.color" data-opacity="0.8"></input>

当然，我只能看到当我更改颜色时显示颜色值，但是如何绑定数据不透明度属性值（每次用户选择一个时都会更改新的不透明度值）到 settings.text_area.opacity 变量？看来我必须为此制定自己的指令，不是吗？

Answer 1

在{{ settings.text_area.opacity }}内设置data-opacity一样简单！只要您的不透明度模型被您拥有的任何其他输入更改，它就会立即更新。

<input id="ta" ng-model="settings.text_area.color" 
               data-opacity="{{ settings.text_area.opacity }}" />

Answer 2

是的，我想是的。据我所知，你只需要通过自定义方法来查看属性数据不透明度的自定义方法，听取对#ta的更改。只需确保在选择不透明度/颜色时触发角度，以便触发手表以检查值是否更改。也许你必须用手动范围apply（）来做。

watch('watchForOpacityChange', function() {  
  // do the stuff you want to do with the new data here  
});  

function watchForOpacityChange() {  
  return $element.attr('data-opacity'); //jquery light method attr is available on $element  
}

这只是您在指令中想要和需要的示例代码。你可以包装整个jquery功能，但这意味着更多的工作。

问候
托拜厄斯

绑定自定义属性值

2 个答案: