AngularJS Example

by AlexFigueiredoo

HTML

<div ng-app="customControl">
  
     <range-picker ng-model="modelo">
        Filtrar por perĂ­odo
     </range-picker>
     {{modelo}}
    
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style>
.range { padding: 30px; cursor: pointer; background-color: red; }

JavaScript

angular.module('customControl', [])
.directive('rangePicker', function () {
    
    return {
        restrict : 'E',
        require : '?ngModel',
        replace : true,
        transclude : true,
        template : '<div class="range" ng-transclude></div>',
        
        link : function (ng, elem, attrs, ngModel) {
            
            var title = 'Test';
            var i = 0;
            
            elem.bind('click', function () {
                console.log('click');
                ngModel.$setViewValue(title + ++i);
            });
            
        }
    }
});