绑定自定义属性值

我有一个与当前设置的JSON。它的结构是这样的：绑定自定义属性值

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

然后，我在我的页面上有一些输入用户可以选择颜色值。选择由MiniColors执行。当您定义用户不仅应该选择颜色而且不透明时，minicolors会将选定的不透明度值作为属性存储在名为“数据不透明度”的输入标签中。颜色值（十六进制）的存储方式与输入中的任何文本类似。

要进行测试，我已经加入到我的HTML这样的：

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

我输入标签如下所示：

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

当然，我只能看到颜色当我更改颜色时显示值，但是如何将数据不透明度属性值（每当用户选择新的不透明度值时都会更改）设置为setti ngs.text_area.opacity变量？看来我必须为此做出自己的指示，不是吗？

来源

2014-06-11 kaytrance

如何选择正确的答案？ –

是的，我认为是。我知道你只需要听一下对#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的功能，但这意味着更多的工作。

问候
托比亚斯

来源

2014-06-11 15:02:03 Tobias

这不会监视所有具有数据不透明属性的dom元素吗？当我有很多选择颜色的dom元素时，我如何知道应该使用什么设置？ – kaytrance

watch方法只能由与此指令相关的一个元素触发。这只是你希望在你的指令中使用的一些代码。如果将ngModel注入到指令中，并将ng模型设置为settings.text_area，您将知道哪个对象将不透明度和颜色更新为。 – Tobias

啊，我明白了，好极了，好像是我在找的东西。将测试出来。 – kaytrance

一样方便设置内部data-opacity的{{ settings.text_area.opacity }}！一旦你的不透明模型被你有任何其他输入改变，它就会更新。

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

来源

2014-06-11 15:03:59

即使当jquery将值设置为属性data-opacity时，它是否会作为双重绑定工作？不会“{{settings.text_area.opacity}}”被重写吗？ – Tobias

是的，它是双绑定的。任何地方你改变这个模型，它会更新所有的人 –

好！我认为$（'＃ta'）。attr（'data-opacity'，'0.7'）;打破了元素上的模型绑定，并且角度没有“注意”这个变化。 – Tobias

绑定自定义属性值

回答

相关问题