Skip to content

Commit 61469d5

Browse files
ruhleyruhley
committed
Bug #167 Fixing up problem angular v1.5 and lower
1 parent b982d9f commit 61469d5

File tree

4 files changed

+270
-4
lines changed

4 files changed

+270
-4
lines changed

‎examples/01-simple.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
<script src="../bower_components/angular/angular.min.js"></script>
1010
<script src="../bower_components/tinycolor/dist/tinycolor-min.js"></script>
1111

12-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script>
13-
1412
<script src="../dist/angularjs-color-picker.js"></script>
1513

1614
<script src="app.js"></script>

‎examples/03-angular-1.5.html‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<html>
2+
<head>
3+
<title>Example 1 - Simple</title>
4+
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6+
7+
<link rel="stylesheet" href="../dist/angularjs-color-picker.min.css" />
8+
9+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
10+
<script src="../bower_components/tinycolor/dist/tinycolor-min.js"></script>
11+
12+
<script src="../dist/angularjs-color-picker.js"></script>
13+
14+
<script src="app.js"></script>
15+
</head>
16+
<body ng-app="app" ng-controller="AppCtrl">
17+
<div class="col-sm-12">
18+
<h1>AngularJS Color Picker</h1>
19+
<p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
20+
<form class="col-sm-12">
21+
22+
<h3>Color</h3>
23+
24+
<div class="row">
25+
<label class="control-label">Format (format)</label>
26+
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
27+
</div>
28+
29+
<div class="row">
30+
<label class="control-label">Hue (hue) - whether or not to display the hue control</label>
31+
<select ng-model="options.hue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
32+
</div>
33+
34+
<div class="row">
35+
<label class="control-label">Saturation (saturation) - whether or not to display the saturation control</label>
36+
<select ng-model="options.saturation" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
37+
</div>
38+
39+
<div class="row">
40+
<label class="control-label">Lightness (lightness) - whether or not to display the lightness control</label>
41+
<select ng-model="options.lightness" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
42+
</div>
43+
44+
<div class="row">
45+
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
46+
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
47+
</div>
48+
49+
<div class="row">
50+
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
51+
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
52+
</div>
53+
54+
<h3>Swatch</h3>
55+
56+
<div class="row">
57+
<label class="control-label">Swatch (swatch) - whether or not to display the swatch inside the input field</label>
58+
<select ng-model="options.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
59+
</div>
60+
61+
<div class="row">
62+
<label class="control-label">Swatch Only (swatch-only) - whether or not to display the input field</label>
63+
<select ng-model="options.swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
64+
</div>
65+
66+
<div class="row">
67+
<label class="control-label">Swatch Position (swatch-pos) - the position of the swatch in the input field - 'left' or 'right'</label>
68+
<select ng-model="options.swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
69+
</div>
70+
71+
<div class="row">
72+
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
73+
<select ng-model="options.swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
74+
</div>
75+
76+
<h3>Popup</h3>
77+
78+
<div class="row">
79+
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
80+
<select ng-model="options.pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
81+
</div>
82+
83+
<div class="row">
84+
<label class="control-label">Inline (inline) - whether or not to display inline or in a popup - false, true</label>
85+
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
86+
</div>
87+
88+
<div class="row">
89+
<label class="control-label">Round (round) - whether or not to display the picker as a circle</label>
90+
<select ng-model="options.round" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
91+
</div>
92+
93+
<div class="row">
94+
<label class="control-label">Horizontal (horizontal) - whether or not to display the hue, saturation, lightness, and opacity sliders horizontally below</label>
95+
<select ng-model="options.horizontal" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
96+
</div>
97+
98+
<h3>Attributes</h3>
99+
100+
<div class="row">
101+
<label class="control-label">Required (required)</label>
102+
<select ng-model="options.required" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
103+
</div>
104+
105+
<div class="row">
106+
<label class="control-label">Disabled (disabled)</label>
107+
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
108+
</div>
109+
110+
<div class="row">
111+
<label class="control-label">Placeholder (placeholder)</label>
112+
<input type="text" ng-model="options.placeholder" placeholder="Placeholder" class="form-control" />
113+
</div>
114+
115+
<div class="row">
116+
<label class="control-label">ID (id)</label>
117+
<input type="text" ng-model="options.id" placeholder="ID" class="form-control" />
118+
</div>
119+
120+
<div class="row">
121+
<label class="control-label">Name (name)</label>
122+
<input type="text" ng-model="options.name" placeholder="Name" class="form-control" />
123+
</div>
124+
125+
<div class="row">
126+
<label class="control-label">Input Class (inputClass)</label>
127+
<input type="text" ng-model="options.inputClass" placeholder="Input Class" class="form-control" />
128+
</div>
129+
130+
<h3>Show/Hide</h3>
131+
132+
<div class="row">
133+
<label class="control-label">Show Swatch (show.swatch) - whether or not to open when clicking the swatch - true, false</label>
134+
<select ng-model="options.show.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
135+
</div>
136+
137+
<div class="row">
138+
<label class="control-label">Show Focus (show.focus) - whether or not to open when focusing on the input - true, false</label>
139+
<select ng-model="options.show.focus" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
140+
</div>
141+
142+
<div class="row">
143+
<label class="control-label">Hide Blur (hide.blur) - whether or not to close when losing focus on the input - true, false</label>
144+
<select ng-model="options.hide.blur" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
145+
</div>
146+
147+
<div class="row">
148+
<label class="control-label">Hide Escape (hide.escape) - whether or not to close when pressing the escape key - true, false</label>
149+
<select ng-model="options.hide.escape" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
150+
</div>
151+
152+
<div class="row">
153+
<label class="control-label">Hide Click (hide.click) - whether or not to close when clicking outside the color picker - true, false</label>
154+
<select ng-model="options.hide.click" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
155+
</div>
156+
157+
<h3>Buttons</h3>
158+
159+
<div class="row">
160+
<label class="control-label">Close Visible (close.show) - whether or not to display the close button - false, true</label>
161+
<select ng-model="options.close.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
162+
</div>
163+
164+
<div class="row">
165+
<label class="control-label">Close Label (close.label) - The label of the close button - "Close"</label>
166+
<input type="text" ng-model="options.close.label" placeholder="Close" class="form-control" />
167+
</div>
168+
169+
<div class="row">
170+
<label class="control-label">Close class (close.class) - The class of the close button - ""</label>
171+
<input type="text" ng-model="options.close.class" placeholder="Class" class="form-control" />
172+
</div>
173+
174+
<div class="row">
175+
<label class="control-label">Clear Visible (clear.show) - whether or not to display the clear button - false, true</label>
176+
<select ng-model="options.clear.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
177+
</div>
178+
179+
<div class="row">
180+
<label class="control-label">Clear Label (clear.label) - The label of the clear button - "Clear"</label>
181+
<input type="text" ng-model="options.clear.label" placeholder="Clear" class="form-control" />
182+
</div>
183+
184+
<div class="row">
185+
<label class="control-label">Clear class (clear.class) - The class of the clear button - ""</label>
186+
<input type="text" ng-model="options.clear.class" placeholder="Class" class="form-control" />
187+
</div>
188+
189+
<div class="row">
190+
<label class="control-label">Reset Visible (reset.show) - whether or not to display the reset button - false, true</label>
191+
<select ng-model="options.reset.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
192+
</div>
193+
194+
<div class="row">
195+
<label class="control-label">Reset Label (reset.label) - The label of the reset button - "Reset"</label>
196+
<input type="text" ng-model="options.reset.label" placeholder="Reset" class="form-control" />
197+
</div>
198+
199+
<div class="row">
200+
<label class="control-label">Reset class (reset.class) - The class of the reset button - ""</label>
201+
<input type="text" ng-model="options.reset.class" placeholder="Class" class="form-control" />
202+
</div>
203+
204+
<h3>Validation</h3>
205+
206+
<div class="row">
207+
<label class="control-label">Restrict To Format (restrictToFormat) - whether or not to restrict typing of the color to the selected format</label>
208+
<select ng-model="options.restrictToFormat" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
209+
</div>
210+
211+
<div class="row">
212+
<label class="control-label">Preserve Input Format (preserveInputFormat) - whether or not a valid input color of a different format should change to the configured format</label>
213+
<select ng-model="options.preserveInputFormat" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
214+
</div>
215+
216+
<div class="row">
217+
<label class="control-label">Allow Empty (allowEmpty) - whether or not to allow empty values as valid</label>
218+
<select ng-model="options.allowEmpty" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
219+
</div>
220+
221+
<h3>Examples</h3>
222+
223+
<div class="row">
224+
<label class="control-label">Color</label>
225+
<button ng-click="open()">Show</button>
226+
<button ng-click="close()">Hide</button>
227+
<color-picker
228+
ng-model="color"
229+
options="options"
230+
api="api"
231+
event-api="eventApi"
232+
></color-picker>
233+
</div>
234+
235+
<div class="row">
236+
Two Way Binding
237+
<!-- <color-picker ng-model="color"></color-picker> -->
238+
{{color}}
239+
</div>
240+
241+
<div class="row">
242+
<h2>HTML Options</h2>
243+
<label class="control-label">Color</label>
244+
<color-picker class='col-sm-1' ng-model="color2" options="{'format':'hex', 'placeholder': 'Hello', 'round': false}"></color-picker>
245+
</div>
246+
247+
<div class="row">
248+
Two Way Binding
249+
{{color2}}
250+
</div>
251+
252+
<div class="row">
253+
<h2>No Options</h2>
254+
<label class="control-label">Color</label>
255+
<color-picker class='col-sm-1' ng-model="color3"></color-picker>
256+
</div>
257+
258+
<div class="row">
259+
Two Way Binding
260+
{{color3}}
261+
</div>
262+
</form>
263+
</div>
264+
</body>
265+
</html>

‎examples/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
angular
2-
.module('app', ['color.picker', 'ngAnimate'])
2+
.module('app', ['color.picker'])
33
.config(function($provide) {
44
$provide.decorator('ColorPickerOptions', function($delegate) {
55
var options = angular.copy($delegate);

‎src/scripts/controller.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default class AngularColorPickerController {
1313
this.$scope.init = this.init.bind(this);
1414

1515
// set default values
16+
this.ngModelOptions = {};
1617
this.hue = 0;
1718
this.saturation = undefined;
1819
this.lightness = undefined;
@@ -173,7 +174,9 @@ export default class AngularColorPickerController {
173174
this.internalNgModel = this.ngModel;
174175

175176
// ng model options
176-
this.ngModelOptions = this.$scope.control[0].$options.$$options;
177+
if (this.$scope.control[0].$options && this.$scope.control[0].$options.$$options) {
178+
this.ngModelOptions = this.$scope.control[0].$options.$$options;
179+
}
177180

178181
// browser variables
179182
this.chrome = Boolean(window.chrome);

0 commit comments

Comments
 (0)