Generate Different Fields Depends On Dom Elements In Angularjs

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

Solution 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) {
          returntrue;
        }
        returnfalse;
      }
    },
    link: function(scope, elem, attr) {

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

It requires work, but you'll get the point.

EDIT: You could use 'scope' field of directives to bind values, but for purpose of finding solution I wanted to make it as clear as possible.

EDIT2: Angular directive is being define with a rule "camelCase" in javascript(directive name) is eaxctly "camel-case" in html, as a directive call.

Angular matches correct js code to called directive and puts exactly in that place in DOM your template. One of the parameters of link method are attributes, those are the same values that you have in html, so under: 'attr.label' you get value of 'label' in html, in this case string "header".

The template attribute of directive is a string with bindigs to variables that were set in scope and and when we combine it all together we get:

1. Angular "finds" a directive
2. Directive code is being fired
3. Link function is being called - inside which we set to field named "label" value of attribute named "label"
4. Template compiles - under {{ }} markers correct variables are being set.
5. vio'la - in place of this cms-input element you get normal html