Angular Variable Not Binding To View

I have an Angular/Onsen app that has an image which is put into a HTML5 canvas tag, and I am picking the color of the pixel I am on on hover. The view is pretty simple:

Solution 1:

Try editing your updateColor() function to something like below.

functionupdateColor(R, G, B) {
  $scope.hex = rgbToHex(R, G, B);
  console.log($scope.hex);
  $scope.$apply();
}

This should work. The problem that you're probably having is that you're updating the value of hex but probably Angular isn't recognizing the change. $scope.$apply() should force the binding to update hence fixing your problem.

Solution 2:

I believe in your case angular is unaware of the change when you use mouse move events because it runs asynchronously. Wrapping the invocation of 'updateColor(red, green, blue);' method in $scope.$apply will help.

So you will have:

$scope.$apply(function () {
    updateColor(red, green, blue);
});

Instead of just:

updateColor(red, green, blue);

You can also use $scope.$apply() without arguments but take a look at here http://jimhoskins.com/2012/12/17/angularjs-and-apply.html they explain why the former method is more preferred.

Share