如何使用自定义指令创建 angularjs 动态模板

How to create angularjs dynamic template with custom directives?

本文关键字：动态 angularjs 创建 何使用 自定义 指令      更新时间：2023-09-26

我想用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"，这些模板包含带有文本占位符的整个页面，占位符应该是这个指令。

然后在另一个页面中，您应该指定要使用的模板，并根据模板中的占位符动态创建输入字段

所以你似乎想要任意数量的页面，这些页面看起来几乎相同，但每个标签、每个标题和帮助文本等都有不同的文本？

为了解决这个问题，我们只需要一个常规视图（模板）和在不同路由（范围）上保存不同数据的变量。

您将需要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 中运行，但应该会让您继续运行。

原始答案

也许像这样的东西与动态模板 URL 取决于类型？

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

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

指令.cmsinput.js

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

指令.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 会创建一个子作用域，并且您可能希望字段值传播到指令的作用域。

相关文章：