Question

如何在使用ng-model包装输入的组件中添加指令验证器？

验证：

angular.module('app').directive('validateInput', validateInput)


function validateInput(){
    return {
        restrict: 'A',
        required: 'ngModel',
        link: link
    }

    function link(scope, element, attr, ctrl){
        //ctrl.$validators....
    }
}

组件使用：

<input-component model="myModel" validate-input></input-component>

组件模板：

<input type="text" ng-model="$ctrl.model" />

Ps。：我总结为简化，但我需要这样做

Answer 1

您创建了一个指令来将输入封装在模板中，对吗？

指令内输入的问题是你丢失了一些角度指令。

例如：想象一下，现在您想要将ngChange添加到同一输入。您必须在包装器中添加范围ngChange，然后将其应用于输入。对于您要应用的每个新指令都会发生这种情况。

解决方案？使用transclusion在输入包装器中添加输入，并简单地将validate-input或任何指令应用于它。

<强> HTML

<input-component> 
    <input type="text" ng-model="myModel" validate-input/>
</input-component>

指令JS

...
return {
     restrict: 'E',
     transclude: true,
     template: '...<ng-transclude></ng-transclude>...'
}
...

在组件包装器中添加diretictive validator - AngularJS

1 个答案: