Bind string value of directive to directive in ng-repeat? - angularjs

Question

I may be totally overlooking the big picture here, but what I'm trying to do, is conditionally include directives based on the object that I'm drawing my form with. Example:
$scope.formItems = [
{type : 'text', directive: 'google-country'},
{type : 'text', directive: 'google-city'},
]
This is a very very small breakdown of an object of about 40 fields, however I just wanted to be able to parse a string representation of the directive name to the value of directive in the object and have it output and run said directive on the form:
<div class="fields" ng-repeat="field in formItems">
<input type="{{field.type}}" {{field.directive}} />
</div>
Is this possible? or do I have to do something different?
I believe the problem is that the directive it self doesn't evaluate. this is how the above ng-repeat will eval:
<input type="text" {{field.directive}}>
EDIT:
I've now restricted the directive to a class, and simply included the field.directive tag inside the class and that should bind right? nup. It evaluated the right string, however the directive wasn't bound. I then did another test to make sure the directive was working by hard coding the name and that worked fine! So I'm thinking that the directives are bound before this scope is evaluated?

Answer 1

{{field.directive}} isn't interpolated to element attribute. It should be used either as attribute value or as text node.
app.directive('directive', function ($compile) {
return {
restrict: 'A',
priority: 10000,
link: function (scope, element, attrs) {
var oldDirective;
attrs.$observe('directive', function (directive) {
if (directive && element.attr(directive) === undefined) {
oldDirective && element.attr(oldDirective, undefined);
oldDirective = directive;
element.attr(directive, '');
$compile(element)(scope);
}
});
}
};
});
For example,
<div directive="ng-show">...</div>
It does the trick but looks like a hack, there may be more appropriate ways to design the form. 'google-country' and 'google-city' could be parameters for common directive rather than input directives.
So I'm thinking that the directives are bound before this scope is
evaluated?
That's right, the scope isn't yet ready when compile takes place. And you get interpolated attribute (including class) values only in link, so $compile should be run at this stage for the directives to take effect.

Answer 2

You need to create an attribute directive that as a parameter will receive the dynamic directive you want. In this directive you need to implement the compile function - this is where you will remove the current directive with the element parameter: element.removeAttr() method and add the dynamic directive to the element with element.attr(). The compile function can return the postlink function, which you should also implement in order to now recompile the element: $compile(element)(scope).