Angular 1.5 component demo

by yaero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/js/utils.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/css/intlTelInput.css">
<div ng-app="ngIntlTelInputApp">
	<div ng-controller="myController">
			<h1>
			 		12.1.6
			</h1>
	    <input type="text" ng-model="phone" ng-intl-tel-input initial-country="gb">
			<div>Model: {{ phone }}</div>
	</div>
</div>

JavaScript

angular.module('ngIntlTelInput', []);angular.module('ngIntlTelInput')
    .provider('ngIntlTelInput', function () {
        var me = this;
        var props = {};
        var setFn = function (obj) {
            if (typeof obj === 'object') {
                for (var key in obj) {
                    props[key] = obj[key];
                }
            }
        };
        me.set = setFn;

        me.$get = ['$log', function ($log) {
            return Object.create(me, {
                init: {
                    value: function (elm) {
                        if (!window.intlTelInputUtils) {
                            $log.warn('intlTelInputUtils is not defined. Formatting and validation will not work.');
                        }
                        elm.intlTelInput(props);
                    }
                },
            });
        }];
    });
angular.module('ngIntlTelInput')
    .directive('ngIntlTelInput', ['ngIntlTelInput', '$log', '$window', '$parse',
        function (ngIntlTelInput, $log, $window, $parse) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, elm, attr, ctrl) {
                    // Warning for bad directive usage.
                    if ((!!attr.type && (attr.type !== 'text' && attr.type !== 'tel')) || elm[0].tagName !== 'INPUT') {
                        $log.warn('ng-intl-tel-input can only be applied to a *text* or *tel* input');
                        return;
                    }
                    // Override default country.
                    if (attr.initialCountry) {
                        ngIntlTelInput.set({initialCountry: attr.initialCountry});
                    }
                    // Initialize.
                    ngIntlTelInput.init(elm);
                    // Set Selected Country Data.
                    function setSelectedCountryData(model) {
                        var getter = $parse(model);
                        var...