当输入无效时，Angular $ valid值不会更新

Question

我试图使用以下模板

制作输入元素的指令

<label class="item-custom item-input input">
    <i class="iconic"></i> <!-- gets icon class -->
    <input  />  <!-- gets all necessary  attributes -->
</label>

问题是$ valid有效的布尔得到了真正的＆＃39;在开始时并且在之后不会更新。

这是我的指示：

main.directive('dtnInput', function () {
    return {
        controller: function ($scope, dictionary) {
            $scope.d = dictionary;
        },
        restrict: 'EAC',
        compile: function(element, attr) {
            var input = element.find('input');
            var icon = element.find('i');
            angular.forEach({
                'type': attr.type,
                'placeholder': attr.placeholder,
                'ng-value': attr.ngValue,
                'ng-model': attr.ngModel,
                'ng-disabled': attr.ngDisabled,
                'icon': attr.ngIcon,
                'ng-maxlength': attr.ngMaxlength,
                'name': attr.name
            }, function (value, name) {
                if (angular.isDefined(value)) {
                    if (name == 'icon') {
                        icon.attr('class', value);
                    } else {
                        input.attr(name, value);
                    }
                }
            });
        },
        templateUrl: 'templates/directives/dtn-input.html'
    };
});

和HTML

 <form name="myForm">
      <dtn-input type="number" 
                 placeholder="number" 
                 name="phone" 
                 ng-icon="icon-login" 
                 ng-model="user.phone" 
                 ng-maxlength="5">
      </dtn-input>
      <input type="text" 
             name="firstName" 
             ng-model="user.firstName" 
             ng-maxlength="5" 
             required />
      <span>
            value: {{user.phone}}
      </span><br />
      <span>
            error: {{myForm.phone.$valid}}
      </span>
 </form>

感谢您的帮助！

====更新=======

我发现了这个错误。

出现问题是因为我使用angular指令的名称调用了指令属性：

 <dtn-input type="number" 
                     placeholder="number" 
                     name="phone" 
                     ng-icon="icon-login" 
                     ng-model="user.phone" - //this
                     ng-maxlength="5"> - //and this