AngularJS - ngModel and isolate 11896732

by mrajcok

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<div ng-app="ExperimentsModule" ng-controller="TestController">
    <ui-datetime ng-model="datetime1"></ui-datetime>parent scope: {{datetime1}}</div>

CSS

/*!  * jQuery UI CSS Framework 1.8.22  *  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)  * Dual licensed under the MIT or GPL Version 2 licenses.  * http://jquery.org/license  *  * http://docs.jquery.com/UI/Theming/API  */
 /* Layout helpers ----------------------------------*/
 .ui-helper-hidden {
     display: none;
 }
 .ui-helper-hidden-accessible {
     position: absolute !important;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
 }
 .ui-helper-reset {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     line-height: 1.3;
     text-decoration: none;
     font-size: 100%;
     list-style: none;
 }
 .ui-helper-clearfix:before, .ui-helper-clearfix:after {
     content:"";
     display: table;
 }
 .ui-helper-clearfix:after {
     clear: both;
 }
 .ui-helper-clearfix {
     zoom: 1;
 }
 .ui-helper-zfix {
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position: absolute;
     opacity: 0;
     filter:Alpha(Opacity=0);
 }
 /* Interaction Cues ----------------------------------*/
 .ui-state-disabled {
     cursor: default !important;
 }
 /* Icons ----------------------------------*/
 /* states and images */
 .ui-icon {
     display: block;
     text-indent: -99999px;
     overflow: hidden;
     background-repeat: no-repeat;
 }
 /* Misc visuals ----------------------------------*/
 /* Overlays */
 .ui-widget-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }
 /*!  * jQuery UI CSS Framework 1.8.22  *  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)  * Dual licensed under the MIT or GPL Version 2 licenses.  * http://jquery.org/license  *  * http://docs.jquery.com/UI/Theming/API  *  * To view and modify this theme, visit...

JavaScript

angular.module("ExperimentsModule", [])
    .directive("uiDatetime", function () {
    return {
        restrict: 'EA',
        replace: true,
        template: '<div class="ui-datetime">' +
            '<input type="text" ng-model="_date" class="date">' +
            '<input type="number" ng-model="_hours" min="0" max="23" class="hours">' +
            '<input type="number" ng-model="_minutes" min="0" max="59" class="minutes">' +
            '<br />Child datetime1: {{datetime1}}' +
            '</div>',
        require: 'ngModel',
        scope: {
            datetime1: '=ngModel'
        },
        link: function (scope, element, attrs, ngModelCtrl) {
            var elDate = element.find('input.date');
            ngModelCtrl.$render = function () {
                console.log(ngModelCtrl.$viewValue);
                var date = new Date(ngModelCtrl.$viewValue);
                var fillNull = function (num) {
                    if (num < 10) return '0' + num;
                    return num;
                };
                scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear();
                scope._hours = date.getHours();
                scope._minutes = date.getMinutes();
            }
            elDate.datepicker({
                dateFormat: 'dd.mm.yy',
                onSelect: function (value, picker) {
                    scope._date = value;
                    scope.$apply();
                }
            });
            var watchExpr = function () {
                var res = scope.$eval('_date').split('.');
                if (res.length == 3) return new Date(res[2], res[1] - 1, res[0], scope.$eval('_hours'), scope.$eval('_minutes'));
                return 0;
            };
            scope.$watch(watchExpr, function (newValue) {
                ngModelCtrl.$setViewValue(newValue);
            }, true);
        }
    };
});

function TestController($scope) {
    $scope.datetime1 = new Date();
}