Как создать динамический шаблон angularjs с пользовательскими директивами?

Question

Я хочу, чтобы создать какой-то шаблон с angularjs, который использует собственные директивы, а затем в соответствии с атрибутами этих директив, которые она создает поля ввода, например, если у вас есть эта директива в шаблоне:

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

и это это код директивы

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

}); 

я хочу на главной странице, чтобы сделать ngInclude в шаблон, а затем показать поля в соответствии с атрибутами директивы, например, для выше он должен показывает директивы: текст поле с текстом по умолчанию - это текст и ярлык с текстом xt «Заголовок содержимого» и текстовое поле с соответствующими атрибутами

Итак, чтобы сделать вещи основными, я расскажу, что хочу, без технических терминов: так что я хочу создать различные html-страницы, содержащие эти директивы, чтобы использовать их в качестве шаблонов, например, «mainPage.html», «header.html», и эти шаблоны содержат целую страницу с заполнителями для текстов, заполнителями должны быть эти директивы.

А потом в другую страницу, вы должны указать, какой шаблон использовать, и в соответствии с заполнителей в шаблоне, она должна создавать поля ввода динамически

Answer 1

Таким образом, кажется, что вы хотите иметь произвольное число страниц, которые все выглядят почти одинаково, но имеют разные тексты для каждой метки, заголовки и тексты справки и т. д.?

Для решения этой проблемы нам нужен только обычный вид (шаблон) и переменные, которые содержат разные данные на разных маршрутах (области).

Вам понадобится angular-route.

Существует учебное пособие, которое, кажется, очень близко к тому, что вы хотите сделать. 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>

различных текстовых строк связана с {{}} в шаблоне до $ объема в контроллере.

Каждый маршрут имеет отдельный контроллер, который заполняет данные в $ scope. (вы можете использовать routeParams, чтобы иметь только один контроллер).

У вас может быть шаблон встроенный, как этот, или в отдельном файле.

Обратите внимание, что этот пример не будет выполняться в stackoverflow, но должен вас поймать.

Оригинал ответа

Возможно, что-то подобное с динамическим templateUrl в зависимости от типа?

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

Вы также можете использовать динамический шаблон с ng-переключателем на scope.type.

директива.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> 

Обратите внимание на использование $ родителю, так как нг-переключатель создает дочернюю сферу, и вы, вероятно, хотите, чтобы значение поля для распространения в директивы.