javascript - 达到模板中输入元素的属性 - 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>   

演示小提琴