AngularJS Clean

AngularJS testing project

by Felipe Alfaro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
{{ perraso }}
<hr>
<input type="text" ng-model="perraso" rp-format="here($value)">

<a-grid date="perraso"></a-grid>

SCSS

html { height: 100%; width: 100%; overflow: auto; }
body { margin: 0; min-height: 100%; min-width: 100%; overflow: visible; font-family: open sans; color: #474747; }

JavaScript

var app = angular.module('app', []);

app.controller('mainController', function($scope, $element){

    $scope.perraso = 'asd';

    $scope.here = function(value){
        return value.toUpperCase();
    };
    
    $scope.$watch('perraso', function(nv){
    	console.log(nv);
    });

});

app.directive('rpFormat', function($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: false,
        link: function($scope, element, $attrs, ngModelController) {
            var run = function(value){
                var formattedInput = $parse($attrs.rpFormat)($scope, {
                    $value: value
                });

                if (formattedInput != value){
                    ngModelController.$setViewValue(formattedInput);
                    ngModelController.$render();
                }         

                return formattedInput; 



            };
            ngModelController.$parsers.push(run);
            ngModelController.$formatters.push(run);
        }
    }
});

app.controller('GridCtrl', function(){
	const self = this;
	self.$onInit = function(){
    	console.log('component', self.date);
    }
});


app.component('aGrid', {

	controller: 'GridCtrl',
    bindings: {
    	date: '='
    },
    template: `
    	<fieldset>
        	{{ $ctrl.data }}
        </fieldset>
    `

});