require(['jquery', 'px-libs/jquery.minicolors'], function($) {
...
});
To use minicolors plugin, you need to include the next scripts:
<script src="path/to/js/libs/jquery.minicolors.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-minicolors.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['minicolors']);Alternatively, you can include minicolors plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'minicolors',
files: [
'path/to/js/libs/jquery.minicolors.js',
'path/to/js/pixeladmin/directives/angular-minicolors.js',
],
},
]);
minicolors directivecolor attribute to be on the element.
You can use minicolors directive where you want.
And when the scope is destroyed the directive will be destroyed.
You can define instance attribute to get a pointer to minicolors element:
<input minicolors instance="ctrl.$minicolors" color="someColor" type="text" class="form-control">
function SomeController() {
// Pointer
this.$minicolors = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$minicolors('value', { color: '#000', opacity: 0.2 });
this.$minicolors('rgbaString');
});
minicolors' options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<input minicolors color="someColor" type="text" class="form-control"
control="'hue'"
change-delay="200"
inline="false">
Event handlers can be bound using attributes (see the plugin's documentation):
<input minicolors color="someColor" type="text" class="form-control"
on-change="ctrl.change"
on-hide="ctrl.hide"
on-show="ctrl.show">
function SomeController() {
this.change = function() { ... };
this.hide = function() { ... };
this.show = function() { ... };
});