Custom Directive using angularjs

Hi Experts,

I am looking for some working example on creating custom directive for Telephone no -(123-456-6789) using angularjs .I have following requirements for this

a)When user leaves the Telephone text box and if it matches the pattern then it automatically show as 3 chunks  in the UI.That means if user enters 1234567891 it should display as 123-456-7891.

b)when I retrieve data from api it should also display as 3 chunks in the UI.

Thanks in advance
ksd123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Hope that help : http://jsfiddle.net/stwwhgxa/

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
    $scope.phone1 = "1234567890";
}]);

myApp.directive("phone", function () {
    return {
        restrict: "A",
        link: function (scope, element, attr) {
            var formatPhone = function() {
                var phone1 = scope.phone1;
                phone1 = phone1.replace(/\D/g, "").substr(0,10);
                if(phone1.length>6) {
                    scope.phone1 = phone1.substr(0,3) + "-" + phone1.substr(3,3) + "-" + phone1.substr(6);
                }
                else if(phone1.length>3) {
                    scope.phone1 = phone1.substr(0,3) + "-" + phone1.substr(3);
                }
                scope.$apply();
            }
            element.bind("focus", function () {
                scope.phone1 = scope.phone1.replace(/\D/g, "").substr(0,10);
                scope.$apply();
            });
            element.bind("blur", formatPhone);
        }
    };
});

Open in new window

0
ksd123Author Commented:
Thank you so much for your time.Actually we have seperate folder  for directives and can be consumed by any  module in the application.In the directive at line we are directly referring controller variable like this "scope.phone1", i believe this should be generic.Because this directive can be consumed by "myCtrl1" or "myCtrl2" etc.How can I achieve this?

secondly when i retreive data from API like (1234567890) and should display as 123-456-7890 but here we are formatting the phone no inside directive? How to do this? Please  help me on this

once again thank you for your time
0
leakim971PluritechnicianCommented:
You right, the first code was very bad...
Check here : http://jsfiddle.net/stwwhgxa/9/

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
    $scope.phone1 = "1234567890";
}]);

myApp.directive("phone", function ($timeout) {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attr, ngModelCtrl) {
            var formatPhone = function() {
                var phone = element.val();
                phone = phone.replace(/\D/g, "").substr(0,10);
                scope[attr.phone] = phone;
                if(phone.length>6) {
                    element.val( phone.substr(0,3) + "-" + phone.substr(3,3) + "-" + phone.substr(6) );
                }
                else if(phone.length>3) {
                    element.val( phone1.substr(0,3) + "-" + phone1.substr(3) );
                }
                ngModelCtrl.$setViewValue(element.val())
                scope.$apply();
            }
            element.bind("focus", function () {
                element.val( element.val().replace(/\D/g, "").substr(0,10) );
                ngModelCtrl.$setViewValue(element.val());
                scope.$apply();
            });
            element.bind("blur", function() {
                formatPhone();
                scope.$apply();
            });
            $timeout(formatPhone, 1);
        }
    };
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ksd123Author Commented:
Thanks @leakim971.Can you please fix following issues

1)We are still hard coding field name (phone1) in the directive at  line 20  
"element.val( phone1.substr(0,3) + "-" + phone1.substr(3) );"

Open in new window

.
can we avaoid this?

2)I  should not format the phone no until user enters valid phone no 1234567890->123-456-7890 (ie .Exact 10 digits).
If user enters <10 or >10 digits which is invalid , I should not format and need to show error message.But now it is formatting(displaying as 3 chunks)  even if I enter 9,8 digits.

3)why do we need $timeout ?

Sorry to bother you.I have to write few more directives for SSN,ZIP etc and trying to understand how to write directives

Thank you in advance
0
leakim971PluritechnicianCommented:
1) it's a mistake, we should have phone.substr(0,3) + "-" + phone.substr(3)
2)  so use inside the format function :if(phone.length==10) {

update the jsfiddle to let me know you understand the code, thanks
0
ksd123Author Commented:
Thank you so much.Here is the updated fiddle directive and correct me if I am wrong

1)Removed below condition, i don't think we need this

 else if(phone.length>3) {
                    element.val( phone1.substr(0,3) + "-" + phone1.substr(3) );
                }

Open in new window

2)Removed " $timeout(formatPhone, 1);".why do we need $timeout ? it's working fine without this statement.

3) If i enter more than 10 digits,it's removing remaing digits automatically.It should show error messages "Exact 10 Numbers only" or if user enter characters it should show message "Numbers only"  and have added below code and it's not working fine.Can you fix this

 <span class="error" ng-show="myForm.input1.$error.phone">Numbers only!</span>
        <span class="error" ng-show="myForm.input1.$error.phone">Exact 10 Numbers only!</span>

4)why do we need "element.bind ("focus") and ("blur") functions in the directive?

Thank you
0
leakim971PluritechnicianCommented:
0) it's wrog, you want to format (so run the whole code) ONLY if you've 10 chars so place you if at the begging

         var formatPhone = function() {
                var phone = element.val();
               if(phone.length==10) {
1) good
2) for the first call of format function (look it not anymore present), it you did not get any error that's fine...
3) if(phone.length==10) {
         // format it
    }
    else if(phone.length>10) {
        // alert / show error
    }
4) remove it and see what happen, please note it's not a filter
0
ksd123Author Commented:
Thank for your explanation. I appreciate your valuable time.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.