如何使用自定义指令创建 angularjs 动态模板? [英] How to create angularjs dynamic template with custom directives?

问题描述

我想用 angularjs 创建某种模板，它使用自定义指令，然后根据这些指令的属性创建输入字段，例如，如果模板中有此指令:

这是指令的代码

 app.directive('cmsInput', function() {返回 {限制:'E'，要求:'^ngModel'，范围: {默认值:'@default'，姓名: '@name',尺寸: '@size',类型:'@type'},});

我想在主页对模板做一个ngInclude，然后根据指令的属性显示字段，例如上面的指令应该显示:一个带有默认文本的文本字段，这是一个文本和带有文本内容标题"的标签和带有相应属性的文本字段

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

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

解决方案

因此，您似乎希望拥有任意数量的页面，它们看起来几乎相同，但每个标签、每个标题和帮助的文本都不同文字等?

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

你需要angular-route.

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

var formApp = angular.module('formApp', ['ngRoute','formAppControllers']);formApp.config(['$routeProvider',功能($routeProvider){$routeProvider.当('/第一个'，{templateUrl: 'form.html',控制器:'firstCtrl'}).当('/秒'，{templateUrl: 'form.html',控制器:'secondCtrl'}).除此以外({重定向到:'/第一个'});}]);var formAppControllers = angular.module('formAppControllers', []);formAppControllers.controller('firstCtrl', ['$scope', '$http',函数($scope，$http){$scope.title = '第一个标题';$scope.firstLabel = '第一个标签';}]);formAppControllers.controller('secondCtrl', ['$scope', '$http',函数($scope，$http){$scope.title = '第二个标题';$scope.firstLabel = '第二个标签';}]);

<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 ng-app="formApp"><div ng-view></div>

不同的文本字符串通过模板中的 {{}} 绑定到控制器中的 $scope.

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

您可以像这样内联模板，也可以在单独的文件中.

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

原答案

根据类型的不同，动态 templateUrl 可能是这样的吗?

.directive('cmsInput', function() {返回 {限制:'E'，要求:'^ngModel'，模板网址:功能(元素，属性){返回 '​​cmsinput-' + attr.type + '.html';}};});

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

directive.cmsinput.js

.directive('cmsInput', function() {返回 {限制:'E'，要求:'^ngModel'，范围: {默认值:'@default'，姓名: '@name',尺寸: '@size',类型:'@type'},模板网址:directive.cmsinput.html};});

directive.cmsinput.html

{{label}}<部分 ng-switch="类型"><div ng-switch-when="textarea"><textarea ng-model="$parent.something" placeholder="{{placeholder}}">

<div ng-switch-default><input type="text" ng-model="$parent.something">

</节>

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

I want to create some kind of template with angularjs that uses custom directives and then according to the attributes of these directives it creates input fields, for example if you have this directive in the template :

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

and this is the code of the directive

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

});

i want in the main page to do a ngInclude to the template and then show the fields according to the attributes of the directive for example for the directives above it should shows : a text field with the default text this is a text and a label with the text 'Content Header' and a textfield with the attributes accordingly

So to make the things basic i will tell what i want without technical terms : so what i want to do is create different html pages that contains this directives to use them as templates for example 'mainPage.html', 'header.html', and these templates contains a whole page with placeholders for the texts, the placeholders should be this directives.

And then in another page you should specify which template to use, and according to the placeholders in the template it should create input fields dynamically

解决方案

So it seems that you want to have an arbitrary number of pages that all look pretty much the same, but have different text for each labels, each headers and help texts etc?

To solve this we just need a regular view (template) and variables that hold different data on different routes (scope).

You will need angular-route.

There is a tutorial that seems to be pretty close to what you want to do. 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>

The different text strings is bound with {{}} in the template to the $scope in the controller.

Each route has a separate controller that populates data into $scope. (you could use routeParams as well to have just one controller).

You could have the template inline like this, or in a separate file.

Note that this example will not run in stackoverflow, but should get you going.

Original Answer

Perhaps something like this with a dynamic templateUrl depending on type?

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

You could go with a dynamic template as well, with a ng-switch on scope.type.

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>

Note the use of $parent, since the ng-switch creates a child scope and you probably want the field value to propagate to the directive's scope.

这篇关于如何使用自定义指令创建 angularjs 动态模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！