AngularJS Clean

AngularJS project

by Felipe Alfaro

HTML

<p>{{ myValue }}</p>
<p><input type="number" ng-model="myValue"></p>

<rp-select ng-model="myValue" options="myOptions"></rp-select>

CSS

* { font-family: open sans; box-sizing: border-box; }
h1, h2, h3, h4, h5 { font-weight: 400; }
h1 { text-align: center; }
h1, h2, h3, h4, h5, p { color: rgb(73, 73, 73); }

div[ap-draggable] {
    width: 50px; height: 50px; background: #004dff;
    font-size: 11px; padding: 2px; color: white;
    border-radius: 2px;
}
div[ap-droppable] {
    width: 350px; height: 50px; background: #c7d8ff; border-radius: 2px;
}

/* ap-draggable */
.ap-draggable { cursor: move; }
.ap-draggable.ap-dragging { transition: none !important; position: fixed; z-index: 1000; pointer-events: none; }
.ap-draggable.ap-dragging.ap-locating { transition: 200ms !important; }
.ap-draggablePlaceHolder { background: transparent !important; pointer-events: none !important; }
.ap-droppableEnter {
    background: red !important;
}

.rp-selected {
    color: red;
}
rp-select {
    display: inline-block;
    background: white;
    border: solid 1px gainsboro;
}
.rp-select-text {
    min-width: 200px;
    min-height: 31px;
    font-size: 12px;
    padding: 7px 15px;
    position: relative;
    
}
ul.rp-select-options {
    position: fixed;
    background: #313131;
    z-index: 500;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.rp-select-options li {
    display: block;
    padding: 7px 15px;
    color: white;
    cursor: pointer;
}
ul.rp-select-options li.rp-hover {
    background: rgba(255, 255, 255, .2)
}
ul.rp-select-options li.rp-active {
    border-left: solid 4px green;
}

JavaScript

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

app.controller('mainController', function($scope, $element){
	$scope.myValue = 1;
    $scope.animalaso_1 = 'Gataso';
    $scope.myOptions = [
    	{
        	text: '<strong>Animalaso:</strong> Gataso',
            value: 1
        },
    	{
        	text: 'Conejaso',
            value: 2
        },
    	{
        	text: 'Elefantaso',
            value: 3
        }
    ];
});

app.directive('rpSelect', selectDirective);


function selectDirective($document, $compile, $sce){
	function template(tElement, tAttrs){
    	return (
        	'<div class="rp-select-text" ng-bind-html="trustAsHtml(selectedText)"></div>'+
            '<ul ng-if="dropDown" class="rp-select-options">' +
            	'<li ng-repeat="option in options" ng-mousedown="select($event, option)" ng-bind-html="trustAsHtml(option.text)"></li>' +
            '</ul>'
        )
    }
    function controller($element, $attrs, $scope){
    	this.loaded = false;
        this.$textWrap = angular.element($element[0].querySelector('.rp-select-text'));
        this.open = function(){
        	$scope.dropDown = true;
        };
        this.close = function(){
        	$scope.dropDown = false;
        };
    }
    function compile(tElement, tAttrs){
    	return function postLink($scope, $element, $attrs, controllers){
        	var ctrl = controllers[0],
            	ngModelCtrl = controllers[1];
            $element.attr('tabindex', 0);
        	$scope.trustAsHtml = $sce.trustAsHtml;
            $scope.dropDown = false;
            $scope.select = function($event, option){
            	$event.stopPropagation();
            	ngModelCtrl.$setViewValue(option.value);
                ctrl.close();
                setTimeout(function(){
                	$element[0].focus();
                });
                
            };
            $scope.selectedText = '';
            
        	var
            focusInEvent = function($event){
            	$event.preventDefault();
           ...