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，然后根据指令的属性显示字段，例如上面的指令应显示：带有默认文本的文本字段，这是一个文本，带有文字＆＃39;内容标题＆＃39;的标签以及具有相应属性的文本字段

所以为了使事情变得基本我将告诉我想要什么而没有技术术语：所以我想要做的是创建包含此指令的不同html页面以将它们用作模板，例如＆＃39; mainPage.html＆＃39 ;，＆＃39; header.html＆＃39;，这些模板包含一个包含文本占位符的整页，占位符应该是此指令。

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

Answer 1

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

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

您需要angular-route。

有一个教程似乎非常接近你想要做的事情。 https://docs.angularjs.org/tutorial/step_07

＆＃13;

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

＆＃13;

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

＆＃13;

不同的文本字符串在模板中与{{}}绑定到控制器中的$ 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创建了一个子范围，你可能希望字段值传播到指令的范围。

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

1 个答案: