angular and jquery: binding does not refresh

Question

I have a jquery colorPicker component. in myApp.js, I use that snippet:

    myApp.controller('chatController', function ($scope) {
    $scope.texts = [];      
    $scope.color = "#00FF00";
    $scope.test = "before";

$('button#color').simpleColorPicker({ onChangeColor: function(color) {
        console.log(color);
        $scope.color = "#FF0000";
        $scope.test = "after";
     } });

I have a {{color}} and {{test}} in my view.

Problem is: when colorPicker triggers changed, this is not reflected ! Instead I need to refresh some other data bindings and then {{test}} and {{color}} change.

What is wrong ?

You need a $scope.apply(function(){$scope.color = "#FF0000"; $scope.test = "after";}) inside onchange color — PSL
– PSL, Commented Aug 13, 2014 at 14:23
It is angular basics.. You need to manually force digest cycle when out of angular... — PSL
– PSL, Commented Aug 13, 2014 at 14:30

Code Whisperer · Accepted Answer · 2014-08-13 14:31:08Z

1

$scope.test = "after";
$scope.$apply(); // tells Angular to update all the bindings

answered Aug 13, 2014 at 14:31

Code Whisperer

23.7k22 gold badges73 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

angular and jquery: binding does not refresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related