1

I have applied ng-model and ng-change directives on input type text, that shows color in hexa that can be changed from color panel as shown.

 <input type="text" ng-model="colors.primary_color"
        ng-change="colorChanged()" class="input-control" 
        placeholder="Primary Color"
        color-picker
        color-picker-model="primaryColorModel"
        color-picker-position="{{colorPickerPosition}}">
 <button class="btn-sidebar">
     <svg width="20px" height="21px">
           <path ng-style="{fill: primaryColorModel}" d="M10.000,3.429 C5.865,3.429 2.500,6.793 2.500,10.928 C2.500,15.063 5.865,18.427 10.000,18.427 C10.000,14.550 10.000,7.089 10.000,3.429 M10.000,0.929 C15.523,0.929 20.000,5.406 20.000,10.928 C20.000,16.450 15.523,20.927 10.000,20.927 C4.477,20.927 -0.000,16.450 -0.000,10.928 C-0.000,5.406 4.477,0.929 10.000,0.929 L10.000,0.929 Z"
                        />
     </svg>
 </button>

Now when I open color panel and change colors, new hexa code shows up in input type text, but colorChanged function doesn't trigger. It only triggers when I click on text box and write some thing.

I want it to be triggerd when I remove any character or value is changed from color panel.

I have tried with $watch like so

$scope.colors = {
        primary_color: "#008fff",
        secondary_color:"#008fff",
        text_color: "#008fff"
    }
$scope.$watch('colors', function (nval, oval) {
        console.log(nval);
    });
$scope.colorChanged = function() {
        $rootScope.$broadcast('color-change', {colors: $scope.colors});        
    }

But it doesn't trigger either.

If I use $apply, it says you are already in digestive cycle.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Umair Jameel
  • 1,573
  • 3
  • 29
  • 54

3 Answers3

2

If you place the relevant markup inside a <form> element and give the <input> a name :

<form name="form">
    <input name="primary_color" type="text" ng-model="colors.primary_color"
        ng-change="colorChanged()" class="input-control" 
        placeholder="Primary Color" 
        color-picker color-picker-model="primaryColorModel"
        color-picker-position="{{colorPickerPosition}}">
  ...
</form>

Then you can programmatically trigger the ng-change directive by using $setViewValue() with no params :

$scope.form.primary_color.$setViewValue()

Will trigger ng-change as the ng-model was changed without actually changing it.

demo -> http://plnkr.co/edit/PmthIfblkPkbKgRInLBc?p=preview

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
1

If you are using this plugin, then the variable you specify in color-picker-model attribute is treated as the binding variable for the color picker. So to detect changes to the color picked, you can watch that variable. In your case: 

$scope.$watch('primaryColorModel', function(nval, oval) {
  //your code here
});
NiK648
  • 1,484
  • 1
  • 9
  • 18
0

I can't tell which plugin you used for, but regardless unless it was built with angular you'll likely have to wire up a callback that runs a $rootScope.$apply(). The reason being is that the piece of code is happening outside angulars eco-system and it needs to be notified to re-run. See my similar answer here: AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

Mathew Berg
  • 28,625
  • 11
  • 69
  • 90