Bug #170 Internal model not updating when changed programatically

Author: ruhley

.eslintrc.yml

@@ -188,7 +188,7 @@ rules:
   max-statements-per-line: off
   max-statements:
     - error
-    - 30
+    - 50
   multiline-ternary: off
   new-cap: off
   new-parens: off

examples/01-simple.html

@@ -226,6 +226,7 @@ <h3>Examples</h3>
                     <label class="control-label">Color</label>
                     <button ng-click="open()">Show</button>
                     <button ng-click="close()">Hide</button>
+                    <button ng-click="setValue('#FF0000')">Set value to #FF0000</button>
                     <color-picker
                         ng-model="color"
                         options="options"

examples/app.js

@@ -60,4 +60,8 @@ angular
         $scope.close = function() {
             $scope.api.close();
         };
+
+        $scope.setValue = function(value) {
+            $scope.color = value;
+        };
     });

package.json

@@ -28,7 +28,7 @@
     "load-grunt-tasks": "^3.5.0",
     "moment": "^2.14.1",
     "protractor": "^5.0.0",
-    "rollup": "^0.47.0",
+    "rollup": "^0.50.0",
     "rollup-plugin-babel": "^3.0.0",
     "rollup-plugin-uglify": "^2.0.0",
     "time-grunt": "^1.3.0"

src/scripts/controller.js

@@ -34,8 +34,6 @@ export default class AngularColorPickerController {
             this.ngModelOptions = this.$scope.control[0].$options.$$options;
         }
 
-        this.internalNgModel = this.ngModelOptions.getterSetter ? this.ngModel() : this.ngModel;
-
         // browser variables
         this.chrome = Boolean(window.chrome);
         let _android_version = window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);
@@ -98,7 +96,7 @@ export default class AngularColorPickerController {
 
         // ngModel
 
-        this.$scope.$watch('AngularColorPickerController.internalNgModel', this.watchNgModel.bind(this));
+        this.$scope.$watch('AngularColorPickerController.internalNgModel', this.watchInternalNgModel.bind(this));
         this.$scope.$watch('AngularColorPickerController.ngModel', this.watchNgModel.bind(this));
 
         // options
@@ -174,6 +172,16 @@ export default class AngularColorPickerController {
         });
     }
 
+    watchInternalNgModel(newValue, oldValue) {
+        // the mouse is still moving so don't do anything yet
+        if (this.colorMouse) {
+            return;
+        }
+
+        // calculate and set color values
+        this.watchNgModelSet(newValue);
+    }
+
     /** Triggered on change to internal or external ngModel value */
     watchNgModel(newValue, oldValue) {
         // set initial value if not already set
@@ -184,6 +192,9 @@ export default class AngularColorPickerController {
         // sets the field to pristine or dirty for angular
         this.checkDirty(newValue);
 
+        // update the internal model from external model
+        this.internalNgModel = this.ngModelOptions.getterSetter ? this.ngModel() : this.ngModel;
+
         // the mouse is still moving so don't do anything yet
         if (this.colorMouse) {
             return;

test/page-object.js

@@ -2,7 +2,6 @@
 class Page {
     constructor() {
         this.url = 'http://localhost:8000/test/test.html';
-        // this.url = 'http://localhost/angular-color-picker/test/test.html';
         this.body = element(by.css('body'));
 
         // attribute fields
@@ -89,6 +88,14 @@ class Page {
     blurColorPicker() {
         browser.driver.executeScript('document.activeElement.blur()');
     }
+
+    getNgModel() {
+        return this.color_picker.evaluate('color');
+    }
+
+    setNgModel(value) {
+        return this.color_picker.evaluate(`color = '${value}'`);
+    }
 }
 
 module.exports = new Page();

test/test.html

@@ -16,6 +16,17 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Color</label>
+                    <button ng-click="open()">Show</button>
+                    <button ng-click="close()">Hide</button>
+                    <color-picker
+                        ng-model="color"
+                        options="options"
+                        api="api"
+                        event-api="eventApi"
+                    ></color-picker>
+                </div>
 
                 <h3>Color</h3>
 
@@ -210,20 +221,6 @@ <h3>Buttons</h3>
                     <label class="control-label">Reset class (reset.class) - The class of the reset button - ""</label>
                     <input type="text" ng-model="options.reset.class" placeholder="Class" class="form-control" />
                 </div>
-
-                <h3>Examples</h3>
-
-                <div class="row">
-                    <label class="control-label">Color</label>
-                    <button ng-click="open()">Show</button>
-                    <button ng-click="close()">Hide</button>
-                    <color-picker
-                        ng-model="color"
-                        options="options"
-                        api="api"
-                        event-api="eventApi"
-                    ></color-picker>
-                </div>
             </form>
         </div>
     </body>