3

I am trying to create a directive for color picker and value of ngModel value is not being updated. Any idea whats going wrong?

Here is my code:

            .directive('colpkr', [function () {
            return {
                restrict: 'A',
                scope: {
                    theme : "@theme",
                    ngModel : "="
                },
                link: function postLink(scope, iElement, iAttrs) {
                    theme = scope.theme || "light";

                    $(iElement).colpick({
                        layout:'hex',
                        submit:0,
                        colorScheme:theme,
                        onChange:function(hsb, hex, rgb, iElement, bySetColor) {
                            if(!bySetColor) scope.ngModel = '#' + hex;
                        }
                    });
                }
            };
        }]);
2
  • I think you might want to require ngModel rather than make it part of the directives scope. That way you're getting a reference to the model controller and not just a value in a child scope.
    – BenCr
    Jan 29, 2015 at 12:03
  • Can you create a plunker with a small working sample of your code. I'd like to try and see if I can get it working with require rather than scope
    – BenCr
    Jan 29, 2015 at 12:12

4 Answers 4

3

You need to trigger a digest loop, which Angular uses to update the DOM, manually in your directive. scope.$apply() is an option, but you may encounter Error: $digest already in progress.

So you'd better use evalAsync or applyAsync to trigger a safe digest cycle,like

scope.$evalAsync(function () {
  scope.ngModel = '#' + hex;
});

Or you can merge these two options, do like some Angular built-in directives

if ($rootScope.$$phase) {
  scope.$evalAsync(callback);
} else {
  scope.$apply(callback);
}
2
  • let me try this one too! Jan 29, 2015 at 12:20
  • @Shreejibawa please note that evalAsync is available only after Angular 1.1 and applyAsync for Angular 1.3.8 +
    – Rebornix
    Jan 29, 2015 at 12:26
2

You might want to refresh scope.

Use

onChange:function(hsb, hex, rgb, iElement, bySetColor) {
    if(!bySetColor) scope.ngModel = '#' + hex;
    scope.$apply();
}
1
  • perfect! Thanks! how could I've missed this? Jan 29, 2015 at 11:50
0

Inject $parse service in your directive. Then you can $parse(attrs.ngModel) to which you can assign the new value.

// inject $parse service in your directive
// Your link function
function link(scope, el, attrs) {
    el.on('change', function() {
        scope.$evalAsync(function() {
            var
                // parse the ngModel
                ngModel = $parse(attrs.ngModel),
                // get the new value
                newValue = el.val();
            // 
            ngModel.assign(scope, newValue);
        })
    })
}

Good Luck.

0

Worked like a charm

  scope.$evalAsync(function() {

       var ngModel = $parse(attrs.ngModel),

       newValue = 'Its working';

       ngModel.assign(scope, newValue);
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.