Fixing up clear and reset buttons for initial values that are not set when color picker is initialised

Tim-Intellipharm · Tim-Intellipharm · commit ce95b52da056 · 2017-09-25T17:38:59.000+10:00
diff --git a/examples/01-simple.html b/examples/01-simple.html
@@ -11,7 +11,7 @@
         <script src="../bower_components/angular/angular.min.js"></script>
         <script src="../bower_components/tinycolor/dist/tinycolor-min.js"></script>
 
-        <script src="../dist/angularjs-color-picker.js"></script>
+        <script src="../src/scripts/module.js" type="module"></script>
 
         <script src="app.js"></script>
     </head>
diff --git a/examples/04-app.js b/examples/04-app.js
@@ -0,0 +1,18 @@
+angular
+    .module('app', ['color.picker'])
+    .controller('AppCtrl', function($scope, $timeout) {
+        $timeout(() => {
+            $scope.color = 'hsl(180, 100%, 50%)';
+        });
+        $scope.options = {
+            close: {show: true},
+            clear: {show: true},
+            reset: {show: true},
+            placeholder: $scope.color
+        };
+        $scope.api = {};
+
+        $scope.setValue = function(value) {
+            $scope.color = value;
+        };
+    });
diff --git a/examples/04-delayed-initial-value.html b/examples/04-delayed-initial-value.html
@@ -0,0 +1,44 @@
+<html>
+    <head>
+        <title>Example 4 - Delayed Initial Value</title>
+
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+
+        <link rel="stylesheet" href="../dist/angularjs-color-picker.min.css" />
+        <link rel="stylesheet" href="../dist/themes/angularjs-color-picker-bootstrap.min.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
+
+        <script src="../bower_components/angular/angular.min.js"></script>
+        <script src="../bower_components/tinycolor/dist/tinycolor-min.js"></script>
+
+        <script src="../src/scripts/module.js" type="module"></script>
+
+        <script src="04-app.js"></script>
+    </head>
+    <body ng-app="app" ng-controller="AppCtrl">
+        <div class="col-sm-12">
+            <h1>AngularJS Color Picker</h1>
+            <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
+            <form class="col-sm-12">
+
+                <h3>Examples</h3>
+
+                <div class="row">
+                    <label class="control-label">Color</label>
+                    <button ng-click="setValue('#FF0000')">Set value to #FF0000</button>
+                    <color-picker
+                        ng-model="color"
+                        options="options"
+                        api="api"
+                        event-api="eventApi"
+                    ></color-picker>
+                </div>
+
+                <div class="row">
+                    Two Way Binding
+                    {{color}}
+                </div>
+            </form>
+        </div>
+    </body>
+</html>
diff --git a/src/scripts/controller.js b/src/scripts/controller.js
@@ -185,7 +185,7 @@ export default class AngularColorPickerController {
     /** Triggered on change to internal or external ngModel value */
     watchNgModel(newValue, oldValue) {
         // set initial value if not already set
-        if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) {
+        if (newValue !== undefined && !this.hasOwnProperty('initialNgModel')) {
             this.initialNgModel = newValue;
         }
 
@@ -481,11 +481,9 @@ export default class AngularColorPickerController {
         };
 
         this.api.clear = (event) => {
-            if (this.internalNgModel !== '') {
-                this.setNgModel('');
+            this.setNgModel(null);
 
-                this.eventApiDispatch('onClear', [event]);
-            }
+            this.eventApiDispatch('onClear', [event]);
         };
 
         this.api.reset = (event) => {
