CODEWITHSUNDEEP
angularjs
kaytrance
kaytrance

Reputation: 2757

Bind custom attribute value

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?

Upvotes: 0

Views: 3085

Answers (2)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67161

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 }}" />

Upvotes: 1

Tobias
Tobias

Reputation: 883

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

Upvotes: 0

Related Questions