javascript - Generate different fields depends on DOM elements in angularjs

Question

So i have an application that should take the html of one page which contains different custom directives.

and there is another page which will load the html of the first page and generate input fields according to the number of the custom directive (cms-input) existing in the first page and to the type specified.

so for example here is the first html page

<cms-input type='text' size='14' default='header' label='Header' ></cms:input>

<cms-input type='textfield' size='50' default='paragraph' label='Paragraph'> </cms:input>

the second page should load the first page and generate the fields :

<label>Header</label>
<input type='text' value='header'>
<label>Paragraph</label>
<textarea>paragraph</textarea>

Answer 1

Thats what directives are designed for, point is to figure out best way to pass and evaluate those attributes of fields, in plnkr i made a possible solution.

Here you have a starting point: PLNKR

app.directive('cmsInput', function() {
  return {
    restrict: 'E',
    template: '<label ng-if=(exists(label))>{{label}}</label>',
    controller: function($scope) {
      $scope.exists = function(a) {
        if(a && a.length>0) {
          return true;
        }
        return false;
      }
    },
    link: function(scope, elem, attr) {

      scope.label = attr.label;
      
    }
    
  }
  
})