How to create angularjs dynamic template with custom directives?

So it seems that you want to have an arbitrary number of pages that all look pretty much the same, but have different text for each labels, each headers and help texts etc?

To solve this we just need a regular view (template) and variables that hold different data on different routes (scope).

You will need angular-route.

There is a tutorial that seems to be pretty close to what you want to do. https://docs.angularjs.org/tutorial/step_07

var formApp = angular.module('formApp', [
  'ngRoute',
  'formAppControllers'
]);

formApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/first', {
        templateUrl: 'form.html',
        controller: 'firstCtrl'
      }).
      when('/second', {
        templateUrl: 'form.html',
        controller: 'secondCtrl'
      })
      .otherwise({
          redirectTo: '/first'
      });
  }]);


var formAppControllers = angular.module('formAppControllers', []);

formAppControllers.controller('firstCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $scope.title = 'First Title';
    $scope.firstLabel = 'First Label';
  }]);

formAppControllers.controller('secondCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $scope.title = 'Second Title';
    $scope.firstLabel = 'Second Label';
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script>


<script type="text/ng-template" id="form.html">
    <div class="view">
        <h2>{{title}}</h2>

        <label>{{firstLabel}}</label>
        <input type="text" ng-model="firstInput">
    </div>
</script>

<div ng-app="formApp">
  <div ng-view></div>
</div>

The different text strings is bound with {{}} in the template to the $scope in the controller.

Each route has a separate controller that populates data into $scope. (you could use routeParams as well to have just one controller).

You could have the template inline like this, or in a separate file.

Note that this example will not run in stackoverflow, but should get you going.

Original Answer

Perhaps something like this with a dynamic templateUrl depending on type?

.directive('cmsInput', function() {
    return {
        restrict: 'E',
        require: '^ngModel',
        templateUrl: function(elem, attr) {
            return 'cmsinput-' + attr.type + '.html';
        }
    };
});

You could go with a dynamic template as well, with a ng-switch on scope.type.

directive.cmsinput.js

.directive('cmsInput', function() {
    return {
        restrict: 'E',
        require: '^ngModel',
        scope: {
            default: '@default',
            name: '@name',
            size: '@size',
            type: '@type'
        },
        templateUrl: directive.cmsinput.html
    };
});

directive.cmsinput.html

<label>{{label}}</label>
<section ng-switch="type">
  <div ng-switch-when="textarea">
    <textarea ng-model="$parent.something" placeholder="{{placeholder}}">
  </div>
  <div ng-switch-default>
    <input type="text" ng-model="$parent.something">
  </div>
</section>

Note the use of $parent, since the ng-switch creates a child scope and you probably want the field value to propagate to the directive's scope.