Question #160 Testing ng-model-options getterSetter

ruhley · Aug 1, 2017 · 08535af · 08535af
1 parent d279ed2
commit 08535af
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/examples/02-app.js b/examples/02-app.js
@@ -0,0 +1,23 @@
+angular
+    .module('app', ['color.picker'])
+    .controller('AppCtrl', function($scope) {
+        $scope.eventApi = {
+            onChange: function() {
+                console.log($scope.color);
+            },
+            onBlur: function() {
+                console.log($scope.color);
+            },
+            onOpen: function() {
+                console.log($scope.color);
+            },
+            onClose: function() {
+                console.log($scope.color);
+            },
+        };
+
+        var _color = 'hsl(0, 100%, 50%)';
+        $scope.color = function(newColor) {
+          return angular.isDefined(newColor) ? (_color = newColor) : _color;
+        };
+    });
diff --git a/examples/02-getterSetter.html b/examples/02-getterSetter.html
@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <title>Example 2 - Getter Setter</title>
+
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+
+        <link rel="stylesheet" href="../dist/angularjs-color-picker.min.css" />
+
+        <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="02-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>
+            {{color}}
+            <color-picker
+                ng-model="color"
+                ng-model-options="{ getterSetter: true }"
+                event-api="eventApi"
+            ></color-picker>
+        </div>
+    </body>
+</html>