Last active
February 3, 2016 13:10
-
-
Save coryasilva/651fb409a8c59814772b to your computer and use it in GitHub Desktop.
AngularJs Directive for jSignature
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//https://github.com/brinley/jSignature | |
//<div data-j-signature="form.signature" data-pen-color="#ff00ff" data-line-color="#00ffff" data-readonly="readonly"></div> | |
app.directive('jSignature', ['$timeout', | |
function ($timeout) { | |
return { | |
restrict: 'EA', | |
scope: { | |
model: '=jSignature', | |
penColor: '@', | |
lineColor: '@', | |
readonly: '=' | |
}, | |
link: function (scope, element, attrs, controller) { | |
// Style undoButton | |
var undoButton = function () { | |
var undoButtonStyle = 'position:absolute;display:none;margin:0 !important;top:auto'; | |
var $undoButton = $('<button type="button" class="btn btn-xs btn-default" style="' + undoButtonStyle + | |
'">Undo Last Stroke</button>').appendTo(this.$controlbarLower); | |
var buttonWidth = $undoButton.width(); | |
$undoButton.css('left', Math.round(( this.canvas.width - buttonWidth ) / 2)); | |
return $undoButton; | |
}; | |
// Create Settings Object | |
var settings = { | |
UndoButton: undoButton | |
}; | |
if (scope.lineColor) { | |
settings['decor-color'] = scope.lineColor; | |
} | |
if(scope.penColor) { | |
settings.color = scope.penColor; | |
} | |
// Build jSignature Element | |
element.jSignature(settings); | |
// Watch Model | |
scope.$watch('model', function(newValue, oldValue) { | |
if (typeof newValue !== 'undefined') { | |
var value = newValue.split(','); | |
if (value[1] && value[1].length > 0) { | |
try { | |
element.jSignature("setData", "data:" + newValue); | |
} catch (e) { | |
console.log('Nim: jSignature - Bad format while trying to setData', e); | |
} | |
} else { | |
element.jSignature('reset'); | |
} | |
} | |
}); | |
// Watch readOnly | |
scope.$watch('readonly', function (newValue, oldValue) { | |
if(newValue === true) { | |
element.jSignature('disable'); | |
// Hide undo button | |
element.find('button').css({'display': 'none'}); | |
} else { | |
element.jSignature('enable'); | |
var currentModel = scope.model.split(','); | |
// Show undo button only if there are actions to undo? | |
if (currentModel[1] && currentModel[1].length > 0) { | |
element.find('button').css({'display': 'block'}); | |
} | |
} | |
}); | |
// Bind to jSignature Event | |
element.bind('change', function(e){ | |
// $timeout, 100, true because event happens outside angular's digest cycle | |
// and change is called on setData | |
$timeout(function () { | |
// getData returns an array of [mimetype, string of jSignature's custom Base30-compressed format] | |
var dataPair = element.jSignature("getData","base30"); | |
scope.model = dataPair.join(","); | |
}, 100, true); | |
}); | |
} | |
}; | |
} | |
]); |
I have tried your directive jsignature. It throwing following error Error: undefined is not a function (evaluating 'element.jSignature()')
I created a reduced and more basic version of the directive. Maybe this helps.
Can you Please post a HTML demo for it with angular validation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@Airswoop1 Sorry I just now saw this comment. I am glad you found it helpful!
For the base30 you need to include the plugin from jSignature. Regarding the $(element) that should not matter as long as jQuery is loaded before angular. That said, I am unsure about the scope issue. It does not really hurt to remove it; I just typically use isolated scopes for stuff like this.