How To Create Angularjs Dynamic Template With Custom Directives?

I want to create some kind of template with angularjs that uses custom directives and then according to the attributes of these directives it creates input fields, for example if y

Solution 1:

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';
  }]);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script><scripttype="text/ng-template"id="form.html">
    <div class="view">
        <h2>{{title}}</h2><label>{{firstLabel}}</label><inputtype="text"ng-model="firstInput"></div></script><divng-app="formApp"><divng-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><sectionng-switch="type"><divng-switch-when="textarea"><textareang-model="$parent.something"placeholder="{{placeholder}}"></div><divng-switch-default><inputtype="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.