指示文のng-modelの有効性を設定するにはどうすればよいですか？

Question

電話番号を取得するためのこの単純すぎる指令があります。電話番号が10桁未満の場合、NGモデルを無効にします。私は$ setValidityをテストしていましたが、それは関数ではないとは言いません。

angular.module('valkyrie').directive('phonenumber', function(){ 

return{ 
scope: {phonemodel: '=model'}, 
template: '<input ng-model="inputValue" type="tel" class="form-control">', 
link: function(scope, element, attributes){ 
    scope.$watch('inputValue', function(value, oldValue) { 
    value = String(value); 
    var number = value.replace(/[^0-9]+/g, ''); 
    scope.phonemodel = number; 
    scope.phonemodel.$setValidity('phone', false); 
    console.log(scope.phonemodel); 
    }); 
}, 
} 
}); 

Answer 1

Aluanハダッドはコメントで述べたように、あなたはあなたのディレクティブ内ngModelディレクティブを必要とする必要があります。それはngModelControllerへのアクセスを提供し、次にngModelController.$setValidityを行うことができます。

こちらのデモのデモは、http://codepen.io/miparnisari/pen/LxPoVwをご覧ください。

angular.module('valkyrie', []) 
    .controller('parent', function ($scope) { 
    $scope.phone = ''; 
}) 
    .directive('phonenumber', function() { 
    return { 
    require: 'ngModel', 
    template: '<input ng-model="inputValue" type="tel" class="form-control">', 
    link: function(scope, element, attributes, ctrl) { 
     scope.$watch('inputValue', function(value, oldValue) { 
     if (!value) return; 
     scope.ngModel = value.replace(/[^0-9]+/g, ''); 
     if (scope.ngModel.length < 10) 
      ctrl.$setValidity('phoneLength', false); 
     else 
      ctrl.$setValidity('phoneLength', true); 
     }); 
    }, 
    }; 
});