Bind custom attribute value

Question

I have a json with current settings. Its structure is something like this:

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

Then I have some inputs on my page where user can select color values. Selection is performed by a MiniColors. When you define that user should select not only a color but an opacity as well, minicolors stores selected opacity value as attribute in input tag called "data-opacity". The color value (hex one) is stored similar way as any text in input.

To test things out, I have added to my html this:

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

My input tag looks like this:

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

Of course, I can see only that the color value is displayed when I change a color, but how do I bind data-opacity attribute value (that will be changes each time user will select a new opacity value) to settings.text_area.opacity variable? It seems that I do have to make my own directive for that, no?

How about choose an answer as correct?

Jonatas Walker
– Jonatas Walker

2015-12-01 15:22:23 +00:00
Commented Dec 1, 2015 at 15:22 — Jonatas Walker
– Jonatas Walker, Commented Dec 1, 2015 at 15:22

Mark Pieszak - Trilon.io · Accepted Answer · 2014-06-11 15:03:59Z

1

As easy as setting the {{ settings.text_area.opacity }} inside data-opacity! It'll update as soon as your opacity model is changed by whatever other input you have.

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

answered Jun 11, 2014 at 15:03

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tobias Over a year ago

Will that work as a double-binding even when jquery sets the value to the attribute data-opacity? Wont "{{ settings.text_area.opacity }}" be overriden?

Mark Pieszak - Trilon.io Over a year ago

Yes it's double binded. Anywhere you change this model it'll update all of them

Tobias Over a year ago

Nice! I thought $('#ta').attr('data-opacity', '0.7'); broke the model binding on the element and that angular didn't "notice" the change.

kaytrance Over a year ago

The nice thing about ng-model is that I strictly defines a varible to bind for particular dom element. I bet there is a similar approach but to "watch" for custom attribute, like data-opacity for partiular dom element.

Tobias · Accepted Answer · 2014-06-11 15:02:03Z

0

Yes I think so. Of what I know you'll just have to listen to changes made to #ta with angulars dirty checking (watch) with a custom method that looks at the attribute data-opacity. Just make sure that angular is triggered when choosing opacity/color so that the watch is triggered to check if the value changed. Maybe you'll have to do it with a manual scope 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  
}

That was just some sample code for what you would want and need in you directive. You could wrap the whole jquery functionality but that would mean more work.

Regards
Tobias

answered Jun 11, 2014 at 15:02

Tobias

8839 silver badges17 bronze badges

3 Comments

kaytrance Over a year ago

Wouldn't this watch for all dom element that have data-opacity attribute? And how will I know to what setting to apply it when I have a lot of dom element for choosing color?

Tobias Over a year ago

The watch method will only be triggered by the one element associated with this directive. It was just some of the code you would want to have in your directive. If you inject the ngModel to your directive and you set your ng-model to settings.text_area instead you will know which object to update the opacity and color to.

kaytrance Over a year ago

ah, I see, great, seems that it is what I am looking for. Will test it out.

Collectives™ on Stack Overflow

Bind custom attribute value

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related