Wrap exist directive in angular - angularjs

Question

I am using angular js in my application, and I have a form which contains a lot of fields:
<form>
<div class="form-group">
<label for="idname">Name:</label>
<input type="name" class="form-control" id="idname" ng-model="name" name="name">
</div>
<div class="form-group">
<label for="idemail">Email Address:</label>
<input type="password" class="form-control" id="idemail" ng-model="email" name="email">
</div>
<div class="form-group">
<label for="idtype">Choose Type:</label>
<select class="form-control" id="idtype" name="type">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
There are almost 60+ fileds, and most of the markups is bootstrap styles related, so I want to simplify the markups, like this:
<form>
<input label="Name:" type="text" model="name">
<input label="Email Address:" type="email" model="email">
<select label="Choose Type:" model="type">
....
</select>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I want to add some extra attributes like label and model for the form inputs, then I will generate the label and input element and wrap them with the bootstrap styles. Also I want the third directives like min-length or anything else still take effect.
I tried to create the directive like this:
.directive('label', function() {
return {
priority:1,
restrict: 'A',
templateUrl: "field.html",
replace:true
};
})
However it does not work as expected, the custom-ed element like
<input label="Name:" type="text" model="name">
are not inserted into the template, and the label is not generated:
<div class="form-group">
</div>
I think the compile and link may be necessary, but I have no idea how to implement them.
This is the demo.
Is it possible to fix it?

Answer 1

Replace is deprecated since Angular 1.3.
But it works: https://jsfiddle.net/basslagter/yh0qdbhL/1/
What you can do (because of the deprecation) is make a custom element:
<custom-label label="Name:" type="text" model="name"></custom-label>
Defined as:
var myApp = angular.module('myApp', []);
myApp.directive("customLabel", function () {
return {
restrict: "E",
template: '<label>The label was: {{vm.label}}</label>',
controllerAs: 'vm',
scope: { label: '#' },
bindToController: true,
controller: function(){}
};
});
See: https://jsfiddle.net/basslagter/yh0qdbhL/