I've been working on creating a directive for click-to-edit input fields. My goal was to make it an attribute type directive that can work with various types of input fields by simply transcluding the input field itself.
However, I've encountered a problem when using a scope parameter in the directive description (for ipDisable). It seems like things stop functioning properly when this parameter is added (you can try commenting in line 44 in the jsFiddle JS part). It appears to be a scope error, but I'm unsure where to start debugging it. Any guidance or assistance would be greatly appreciated.
jsFiddle: http://jsfiddle.net/HbYwX/3/
HTML:
<input inplace type="string" ip-disable=false name="username" ng-model="uname">
JS:
myApp.directive('inplace', function($compile) {
var compile = function(tElem,tAttrib,transclude) {
var whole = $('<div ng-scope></div>');
var editable = $('<div class="editable-transclude" ng-hide="static">'+
'<a ng-click="changeStatic()" ng-show="!static && !disable()">'+
'<save></a></div>');
whole.append(editable).append('<span class="disabledText" ng-show="static">{{ngModel.$viewValue}}</span>' +
'<a ng-click="changeStatic()" ng-show="static && !disable()">'+
'<edit></a>');
tElem.replaceWith(whole);
transclude(tElem,function(clone) {
clone.removeAttr('inplace');
editable.prepend(clone);
});
return function(scope, element, attrs) {
var input_element = $($(element).find('input')[0]);
scope.name = input_element.name;
scope.ngModel = element.controller('ngModel');
scope.static = true;
scope.changeStatic = function() {
if (scope.static) {
scope.static = false;
} else if (!scope.ngModel.$error[scope.name]){
scope.static = true;
}
};
};
};
return {
transclude: 'element',
scope: { disable: '&ipDisable' },
restrict: 'A',
compile: compile
};
});