达到输入元素的属性模板 - AngularJS

Question

我想达到的输入元素的东西的方式是这样的属性：

<input name="name" type="text" class="form-control" id="salonName" data-ng-model="salon.name" ng-minlength=3 ng-maxlength=30 required/> 
    This works: {{myForm.name.$viewValue}} 
    This does not: {{myForm.name.id}} 
    This does not too: {{myForm.name.ngMinlength}} 

Answer 1

你可以通过使用简单的指令，如：

JS

var fessmodule = angular.module('myModule', []); 

fessmodule.controller('fessCntrl', function ($scope) {}); 
fessmodule.$inject = ['$scope']; 

fessmodule.directive("myDirective", function() { 
      return function(scope, element, attrs) {        
       scope.name = attrs['name']; 
       scope.type = attrs['type']; 
       scope.class = attrs['class']; 
       scope.id = attrs['id']; 
       scope.ngMinlength = attrs['ngMinlength']; 
       scope.ngMaxlength = attrs['ngMaxlength']; 
       scope.ngModel = attrs['ngModel']; 
       scope.required = attrs['required'];     
      }; 
    }); 

添加指令HTML：

<input my-directive 
      name="name" 
      type="text" 
      class="form-control" 
      id="salonName" 
      data-ng-model="salon.name" 
      ng-minlength=3 
      ng-maxlength=30 
      required/> 

    <pre> Name: {{name}}</pre> 
    <pre> type: {{type}}</pre> 
    <pre> class: {{class}}</pre> 
    <pre> ngMinlength: {{ngMinlength}}</pre> 
    <pre> ngMaxlength: {{ngMaxlength}}</pre> 
    <pre> ngModel: {{ngModel}}</pre> 
    <pre> required: {{required}}</pre> 

演示Fiddle