CODEWITHSUNDEEP
angularjscolor-pickerangularjs-scope
Shunter1112
Shunter1112

Reputation: 623

How do I update the scope/ng-model when a third party component modifies the textbox value?

I want to make an editor with using color picker.

Here is a simplified sample. http://jsfiddle.net/xcUev/8/

I'm treating the color as the attribute of angular scope object. I made it choosable by using color picker 

 http://www.html5.jp/library/cpick.html

but after choosing the color, It wouldn't affect as the scope.

Do you have any ideas for making it works like how to affect to scope this input state intentionally.

Please help me...

Upvotes: 1

Views: 1264

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364747

I tried bind()ing a change event, but it never fired (probably because the color picker stops propagation of the event). So I next tried bind()ing a focus event, and that seems to work (I noticed the textbox lost focus, then got it back again when the canvas was hiding).

HTML:

<input type="text" ng-model="data.color" class="html5jp-cpick" cpick>

Directive:

app.directive('cpick', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            element.bind('focus', function() {
                ngModelCtrl.$setViewValue(element.val());
                scope.$apply();
            });
        }
    }
})

Fiddle

Upvotes: 2

Related Questions