Installation problems

[cschaf]

Hi, thanks for your work. I have a little bit trouble with the installation of this plugin. Could you please discribe, whtat exactly i have to include to my index.html and my app,js file?

Thank you.

[cdjackson]

If you’re using bower (??), then you should just be able to type “bower install angular-pick-a-color —save”. Alternatively, download the files from this repo (angular-pick-a-color.js) and also grab the js file from the pick-a-color repo…

Then, in your index file, you need to add the following lines -:

<script type="text/javascript" src="vendor/tinycolor/tinycolor.js"></script>    
<script type="text/javascript" src="vendor/pick-a-color/src/js/pick-a-color.js"></script>
<script type="text/javascript" src="vendor/angular-pick-a-color/src/angular-pick-a-color.js"></script>

<link rel="stylesheet" type="text/css" href="vendor/pick-a-color/src/js/pick-a-color.css"/>

(obviously change the folder names and the pick-a-color css file might have a version number - take a look at the pick-a-color site).

Easiest is to use bower :)

Let me know how it goes…

Chris

[cschaf]

Hi,
thanks for the quick answer,
the installation has been successfull completed. I got an error while using the directive, like in your description.

<pick-a-color id="inputColor" ng-model="color" inline-dropdown="true"></pick-a-color>```

__________________________________________________________________________

TypeError: undefined is not a function
    at http://localhost:8100/lib/angular-pick-a-color/src/angular-pick-a-color.js:76:29
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14471:13)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13875:15)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13878:13)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13878:13)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14465:24)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13875:15)
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13780:30)
    at boundTranscludeFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13894:21)
    at controllersBoundTransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14492:18) <input type="text" id="inputColor" name="undefined" '="" class="pick-a-color form-control ng-pristine ng-valid"> ionic.bundle.js:17763
(anonymous function) ionic.bundle.js:17763
(anonymous function) ionic.bundle.js:15110
nodeLinkFn ionic.bundle.js:14474
compositeLinkFn ionic.bundle.js:13875
compositeLinkFn ionic.bundle.js:13878
compositeLinkFn ionic.bundle.js:13878
nodeLinkFn ionic.bundle.js:14465
compositeLinkFn ionic.bundle.js:13875
publicLinkFn ionic.bundle.js:13780
boundTranscludeFn ionic.bundle.js:13894
controllersBoundTransclude ionic.bundle.js:14492
ngRepeatAction ionic.bundle.js:28164
$watchCollectionAction ionic.bundle.js:20092
Scope.$digest ionic.bundle.js:20221
Scope.$apply ionic.bundle.js:20486
done ionic.bundle.js:16098
completeRequest ionic.bundle.js:16303
xhr.onreadystatechange ionic.bundle.js:16242
____________________________________________________________

Greetings
Christian

[cdjackson]

Looking at this line (element.pickAColor...) the error probably means that the 'pickAColor' jquery plugin isn't loaded, or isn't running for some reason. I would put a breakpoint on this line and have a look at 'element' to see if pickAColor is loaded.

One other thing that might be an issue is to make sure that with your <script> tags, that jquery is loaded first (ie before angular.js). I don't think that this is an issue here, but it might cause other problems later so it's worth doing.

Tonight I'll make a quick demo page and will add that to the repo to assist testing.

[cschaf]

I solved it. the position of my jquery include was at the wrong place. Thanks for your support Chris.

Greetings
Christian

[cdjackson]

No problem - glad it’s working.