Question

我需要设计一个自定义指令，它会为不同的输入类型返回不同的输入字段，如text，number，datepicker等。

目前我正在使用它来支持这个：

<div class="col-xs-12" ng-repeat="option in parameterList">
    <div class="form-group col-xs-6">
        <input type="{{option.inputType}}" 
               class="form-control" 
               name="name" 
               placeholder="Enter the value" 
               ng-model="inputs[$index]" 
               ng-disabled="isNull[$index]">
    </div>
</div>

但是我想使用一个自定义的angular指令，它可以返回输入字段，以便可以在html页面中使用它们。

我不熟悉在angularJS中制作指令，请解释一下。提前致谢

Answer 1

这不是一个特定的编程问题。您只需阅读有关指令的一些教程，而StackOverflow不是教程站点。

官方文档：https://docs.angularjs.org/guide/directive

教程：https://www.google.com/search?q=angularjs+directive+tutorial

Answer 2

您的模板 - temp.html

<div class="col-xs-12" ng-repeat="option in parameterList">


    <div class="form-group col-xs-6">
        <input type="{{option.inputType}}" class="form-control" name="name" placeholder="Enter the value" ng-model="inputs[$index]" ng-disabled="isNull[$index]">

    </div>

<强> app.js

angular.module('docsIsolateScopeDirective', [])
    .controller('Controller', ['$scope', function($scope) {
    $scope.parameterList= {};
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      parameterList: '='
    },
    templateUrl: 'temp.html'
  };
});

用作

<div parameter-list='parameterList'></div>

为ng-repeat中添加的自定义类型的输入字段创建自定义指令

2 个答案: