directives_examples.js

directivesModule
  .directive('colorSource', [
    function () {
      var linkFn = function colorPickerLinkFn(scope, element, attrs, ctrl) {
        element.colorpicker({
          format: 'rgba'
        }).on("changeColor", function cpChangeColorEventHandler(event) {

            scope.$apply(function () {
              var newColor = event.color.toRGB();
              // to rgba(255, 255, 255, 0.8)
              // todo: replace this mokey code
              newColor = 'rgba(_r_, _g_, _b_, _a_)'
                .replace('_r_', newColor.r)
                .replace('_g_', newColor.g)
                .replace('_b_', newColor.b)
                .replace('_a_', newColor.a);
              ctrl.$setViewValue(newColor);
            });
          });

        ctrl.$render = function cpRenderFn() {
          element.data({
            "color": ctrl.$viewValue
          });
          element.colorpicker('update');
        };
      };

      return {
        require: "ngModel",
        restrict: "A",
        replace: true,
        template: "<div class=\"colorSelector color\">" + "<input type=\"hidden\">" + "<span class=\"add-on\"><i style=\"\"></i></span>" + "</div>",
        link: linkFn
      };
    }
  ]);