Strange error: 'mdColorPicker' is non-assignable!

[mcblum]

The color picker was working perfectly, then one day the little color icon disappeared. Then today we got a report from a user and here's the message that we're seeing:

vendor.js:25 Error: [$compile:nonassign] Expression 'undefined' in attribute 'mdColorPreview' used with directive 'mdColorPicker' is non-assignable!

Any idea what that might mean?

[brianpkelley]

Can you post any code and/or demo/link?

[mcblum]

Unfortunately application is behind auth.

Bower.json

 "dependencies": {
    "angular": "~1.5.*",
    "angular-ui-router": "ui-router#~0.2.15",
    "angular-animate": "~1.4.7",
    "angular-whimsical-ripple": "~0.0.1",
    "angular-sanitize": "~1.4.3",
    "growl": "~1.3.1",
    "angular-ui-sortable": "~0.13.4",
    "ng-file-upload": "~9.1.1",
    "ng-lodash": "~0.3.0",
    "ngstorage": "~0.3.9",
    "es5-shim": "~4.3.1",
    "es6-shim": "~0.35.*",
    "satellizer": "~0.13.4",
    "angular-busy": "~4.1.3",
    "angular-loading-bar": "~0.8.0",
    "angular-ui-tree": "~2.15.0",
    "textAngular": "^1.5.0",
    "angular-material-datetimepicker": "^1.4.0",
    "md-color-picker": "0.2.5",
    "angular-material": "^1.0.7"
  },
  "resolutions": {
    "angular": ">=1.5.x",
    "angular-sanitize": "~1.4.3",
    "angular-animate": "~1.4.7"
  },
  "overrides": {
    "angular": {
      "dependencies": {
        "jquery": "*",
        "jquery-ui": "*"
      }
    }
  }

Markup

 <pick-a-color set="PageFactory.page.content.client_color"></pick-a-color>

Console

f {
$id: 696, 
$$childTail: null, 
$$childHead: null, 
$$prevSibling: null, 
$$nextSibling: null…}
$$childHead: null
$$childTail: null
$$destroyed: false
$$isolateBindings: Object
$$listenerCount: Object
$$listeners: Object
$$nextSibling: null
$$phase: nul
l$$prevSibling: null
$$watchers: Array[10]$$watchersCount: 10
$id: 696$parent: f
$root: fclearValue: ()
clickOutsideToClose: undefined
default: undefined
hasBackdrop: undefined
icon: undefined
label: undefined
mdColorAlphaChannel: undefined
etc...

vendor.js:25 Error: [$compile:nonassign] Expression 'undefined' in attribute 'mdColorClearButton' used with directive 'mdColorPicker' is non-assignable!
http://errors.angularjs.org/1.5.3/$compile/nonassign?p0=undefined&p1=mdColorClearButton&p2=mdColorPicker
    at vendor.js:24
    at d (vendor.js:25)
    at y (vendor.js:25)
    at vendor.js:27
    at f.$digest (vendor.js:27)
    at f.$apply (vendor.js:27)
    at o (vendor.js:25)
    at g (vendor.js:25)
    at XMLHttpRequest.$.onload (vendor.js:25)(anonymous function) @ vendor.js:25(anonymous function) @ vendor.js:25f.$digest @ vendor.js:27f.$apply @ vendor.js:27o @ vendor.js:25g @ vendor.js:25$.onload @ vendor.js:25
vendor.js:25 Error: [$compile:nonassign] Expression 'undefined' in attribute 'mdColorPreview' used with directive 'mdColorPicker' is non-assignable!
http://errors.angularjs.org/1.5.3/$compile/nonassign?p0=undefined&p1=mdColorPreview&p2=mdColorPicker
    at vendor.js:24
    at d (vendor.js:25)
    at y (vendor.js:25)
    at vendor.js:27
    at f.$digest (vendor.js:27)
    at f.$apply (vendor.js:27)
    at o (vendor.js:25)
    at g (vendor.js:25)
    at XMLHttpRequest.$.onload (vendor.js:25)(anonymous function) @ vendor.js:25(anonymous function) @ vendor.js:25f.$digest @ vendor.js:27f.$apply @ vendor.js:27o @ vendor.js:25g @ vendor.js:25$.onload @ vendor.js:25

[brianpkelley]

can you post the template for the pick-a-color directive?
Is there an 'md-color-preview' attribute anywhere in that directive?

in v0.2.5 I added quite a few new attribute/options to the color picker. mdColorPreview toggles the preview circle next to the input (true to show, false to hide) and defaults to true.

[mcblum]

That was dumb -- not sure why I posed our directive rather than yours :)

<div class="--sub-section">
    <div class="--wrap">
        <header><h3>Color Picker</h3></header>
        <article class="--full">
            <div md-color-picker ng-model="cpController.set"></div>
        </article>
    </div>
</div>

[brianpkelley]

Ah man, my bad. Looks like I should have set the options to optional.

I'll try to get a hotfix out tonight or tomorrow.

In the mean time, if you use the non-minified version of mdColorPicker.js and change these lines to '=?' instead of '=' it should work.

[mcblum]

We can wait, we're only using this particular directive on our own stuff at the moment. Thank you for your efforts!