In my quest to create an input directive that can handle multiple types of inputs (such as Interval (min-max), DateTime, Number, Text...), I've encountered a challenge. It's crucial that when the user changes the data type, the corresponding input template also changes accordingly. Additionally, I need to be able to have more than one input on the page simultaneously (check out PLUNKR for a clearer picture).
After extensive experimentation and research, I've realized that I need to monitor the attribute (great-input), swap out the input template based on the selected input type, and then compile it. However, I'm facing difficulties implementing this in the compile function, and the watches are not functioning properly in the link function (I'm getting t1, t2).
Therefore, my objective is to change the input template upon selecting a different value in the dropdown menu (for simplicity, I've color-coded the various input types).
$scope.$watch('greatInput', function (newVal) {
console.log(newVal);
html = getTemplate(newVal);
$elem.html('').append($compile(html)($scope));
});
This function should essentially do the trick (with some modifications depending on where it's implemented), but I'm struggling to find the right place to integrate it.
For the complete code, visit: http://plnkr.co/edit/BCuiqg?p=preview