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

因此，为了使事情变得基本，我将在没有技术术语的情况下告诉我想要什么:所以我想做的是创建包含此指令的不同 html 页面，以将它们用作模板，例如“mainPage.html”、“header.html”。 html'，这些模板包含一个带有文本占位符的整个页面，占位符应该是这个指令。

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

Answer 1

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

为了解决这个问题，我们只需要一个常规 View (模板)和在不同路径(范围)上保存不同数据的变量。

您将需要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>

不同的文本字符串在模板中用{{}}绑定(bind)到 Controller 中的$scope。

每个路由都有一个单独的 Controller ，用于将数据填充到 $scope 中。 (您也可以使用 routeParams 来拥有一个 Controller )。

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

请注意，此示例不会在 stackoverflow 中运行，但应该可以让您继续。

原始答案

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

.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
    };
});

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