如何使用自定义指令创建 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，然后根据指令的属性显示字段，例如上面应该显示的指令：一个带有默认文本的文本字段，这是一个文本和带有文本“内容标题”的标签和带有相应属性的文本字段

所以为了让事情变得基本，我会在没有技术术语的情况下告诉我我想要什么：所以我想做的是创建包含此指令的不同 html 页面，以将它们用作模板，例如“mainPage.html”、“header.html”。 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。

每个路由都有一个单独的控制器，用于将数据填充到 $scope。 （您也可以使用 routeParams 来只拥有一个控制器）。

您可以像这样将模板内联，或者放在单独的文件中。

请注意，此示例不会在 stackoverflow 中运行，但应该可以帮助您进行操作。

原答案

也许像这样的动态 templateUrl 取决于类型？

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

您也可以使用动态模板，在 scope.type 上使用 ng-switch。

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>

注意 $parent 的使用，因为 ng-switch 创建了一个子作用域，并且您可能希望字段值传播到指令的作用域。