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 you have this directive in the template :

<cms:input type='text' size='14' default='this is a text' label='Content Header' ></cms:input>

<cms:input type='textarea' size='50' default='this is a text area' label='Content Paragraph' ></cms:input>

and this is the code of the directive

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

});

i want in the main page to do a ngInclude to the template and then show the fields according to the attributes of the directive for example for the directives above it should shows : a text field with the default text this is a text and a label with the text 'Content Header' and a textfield with the attributes accordingly

So to make the things basic i will tell what i want without technical terms : so what i want to do is create different html pages that contains this directives to use them as templates for example 'mainPage.html', 'header.html', and these templates contains a whole page with placeholders for the texts, the placeholders should be this directives.

And then in another page you should specify which template to use, and according to the placeholders in the template it should create input fields dynamically

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

<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.

来源：https://stackoverflow.com/questions/28023660/how-to-create-angularjs-dynamic-template-with-custom-directives