綁定自定義屬性值

我有一個與當前設置的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

綁定自定義屬性值

回答

相關問題