Javascript 指令链接函数中的Angularjs集合有效性

Javascript 指令链接函数中的Angularjs集合有效性,javascript,angularjs,Javascript,Angularjs,我的angularjs应用程序中有一个指令。我想将一个指令与多个模型绑定。但我只想设置一个模型的有效性,即数字 这是我的密码 <form name="userForm"> <select unique-phone name="country" class="form-control" ng-model="newUser.country" ng-options="country.name for country in userdata.country"></s

我的angularjs应用程序中有一个指令。我想将一个指令与多个模型绑定。但我只想设置一个模型的有效性,即数字 这是我的密码

<form name="userForm">
    <select unique-phone name="country" class="form-control" ng-model="newUser.country" ng-options="country.name for country in userdata.country"></select><!-- this drop down is for prefix like +971 -->
    <select unique-phone name="code" ng-model="newUser.code" ng-options="mobile for mobile in userdata.mobile_codes" required></select>
    <input unique-phone name="number" ng-model="newUser.number" type="number"  ng-pattern="/^[0-9]+$/" />
</form>

//Javascript

.directive('uniquePhone', ['$http', function ($http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            scope.$watch( function(){ return element.val(); }, function(value){
                if(scope.newUser.number === undefined || scope.newUser.country === undefined || scope.newUser.code === undefined || scope.newUser.number.toString().length != 7) {ngModel.$loading = false; return;}
                ngModel.$loading = true;
                var objFInal = scope.newUser.country.code + scope.newUser.code + scope.newUser.number;
                $http.get("/api/checknumber/" + objFInal).success(function(data) {
                    ngModel.$loading = false;
                    ngModel.$setValidity('taken', JSON.parse(data));// I just want to set validity of number model on each case...
                    // like userForm.number.$setValidity('taken', true) instead of ngModel.$setValidity
                });


            })
        }
    };
}])

//Javascript
.directive('uniquePhone',['$http',function($http){
返回{
限制:“A”,
要求:'ngModel',
链接:功能(范围、元素、属性、模型){
作用域.$watch(函数(){return element.val();},函数(值){
如果(scope.newUser.number==未定义的| | | scope.newUser.country==未定义的| | scope.newUser.code==未定义的| | scope.newUser.number.toString().length!=7){ngModel.$loading=false;return;}
ngModel.$loading=true;
var objFInal=scope.newUser.country.code+scope.newUser.code+scope.newUser.number;
$http.get(“/api/checknumber/”+objFInal).success(函数(数据){
ngModel.$loading=false;
ngModel.$setValidity('take',JSON.parse(data));//我只想在每个案例上设置数字模型的有效性。。。
//类似于userForm.number.$setValidity('take',true)而不是ngModel.$setValidity
});
})
}
};
}])
在每次通话中,如country元素/code元素或number元素,我只想设置数字模型的有效性。

我的解决方案是这样

<form name="form" novalidate ng-submit="submit(form)">
    <div ng-show="form.pfx.$error.invalid">Prefix is invalid</div>
    <div ng-show="form.code.$error.invalid">Code is invalid</div>
    <div ng-show="form.number.$error.invalid">Number is invalid</div>
        <select phone frm="form" ng-model="phm.pfx" name="pfx" required ><option>971</option></select>
        <select phone frm="form" ng-model="phm.code" name="code"></select>
        <input  phone frm="form" type="text" ng-model="phm.number" name="number" />
        <input type="submit" value="OK" />
    </form>

$timeout已使用,因为初始化表单对象需要一些时间。我希望我能帮助你。

你找到答案了吗?@SergeyPanfilov我写了我的解决方案。请告诉我您是否能找到更好的解决方案。我的案例有点不同,无论如何,这是我案例的解决方案:
app.directive('phone', ['$timeout', function($timeout){
    return {
        scope: {frm:"="},
        require: 'ngModel',
        link: function($scope, iElm, iAttrs, controller) {
            controller.$error.invalid = true;// this will be current element which is calling this link function
            $timeout(function(){
                $scope.frm.pfx.$error.invalid = true;
                $scope.frm.code.$error.invalid = true;
                $scope.frm.number.$error.invalid = true;
            });
        }
    };
}]);