How to create a custom AngularJS directive delegating to ngModel? - angularjs

Question

Suppose I have something like this:
<div my-custom-root="root">
<input type="text" my-custom-Path="path.to.somewhere" />
</div>
And now I want to translate this to something which essentially behaves equivilant to:
<input type="text" ng-model="root.path.to.somewhere" />
I get so far as to specify the two directives, get all the objects etc. These supply me with the root object and the path, but how do create a binding from those? I am missing the generation of the appropriate ng-model directive or the use of the NgModelController directly.
I created a plunkr here with the stuff I managed to put together so far.
For easier reference here is my code of the directives just like they can be found in my plunkr as well:
app.directive('myCustomRoot', function() {
var container;
return {
controller: function($scope) {
this.container = function() {
return container;
};
},
compile: function() {
return function ($scope, elm, attrs) {
$scope.$watch(attrs.myCustomRoot, function(newVal) {
container = newVal;
});
};
}
};
});
app.directive('myCustomPath', function($parse) {
return {
require: '^myCustomRoot',
link: function(scope, element, attrs, containerController) {
var getter = $parse(attrs.myCustomPath);
scope.$watch(function() {
return containerController.container();
},
function(newVal) {
if (newVal) {
alert('The value to be edited is: ' + getter(newVal) + '\nIt is the property "' + attrs.myCustomPath + '"\non Object: ' + JSON.stringify(newVal) + '\n\nNow how do I bind this value to the input box just like ng-model?');
}
}
);
}
};
});
You can see that I have all the things available in my alert-Box, but I don't know how to do the binding.

Answer 1

I hoped that there was some way to write someBindingService.bindInput(myInput, myGetter, mySetter), but I have done quite a lot of source code reading and unfortunately the binding is coupled closely to the compilation.
However thanks to the question "Add directives from directive in AngularJS" I managed to figure out a way which is less elegant but it is compact and effective:
app.directive('myCustomPath', function($compile, $parse) {
return {
priority: 1000,
terminal: true,
link: function(scope, element, attrs, containerController) {
var containerPath = element.closest('[my-custom-root]').attr('my-custom-root');
attrs.$set('ngModel', containerPath + '.' + attrs['myCustomPath']);
element.removeAttr('my-custom-path');
$compile(element)(scope);
}
}
});
This uses a little bit of jQuery, but it should not be to hard to do it with plain jQLite as well.