AngularJS

All

by Felipe Alfaro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-app="myApp">
    <section ng-controller="myController">
    
        <my-toggle ng-model="myString"></my-toggle>
        <input type="text" ng-model="myString" ng-click="goMan($event)">
        
    </section>
</div>

CSS

svg.pos-spinnerCounter{
  padding: 0;
  width: 26px;
  height: 26px;
  transform: rotate(-90deg);
}
svg.pos-spinnerCounter circle{
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 75;
  stroke-dashoffset: 75;
  stroke: red;
}
svg.pos-spinnerCounter text{
  transform: rotate(90deg);
  width: 100%;
  text-align: center;
  color: white;
  font-family: $font_regular;
  font-size: 14px;
  text-anchor: middle;
}
svg.pos-spinnerCounter.pos-fillSpinnerCounter circle{
  stroke-dashoffset: 0;
}
[class*="pos-toggle"]{
    position: relative;
    width: 46px;
    height: 28px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
[class*="pos-toggle"] span{
    display: block;
    width: calc(100% - 8px);
    height: calc(100% - 8px);;
    background: gray;
    opacity: .3;
    border-radius: 17px;
}
[class*="pos-toggle"] a{
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    background: #ededed;
    border-radius: 14px;
    top: 0;
    left: 0;
    transition: 300ms;
    pointer: cursor;
}
div.pos-toggle-on a{
    left: calc( 100% - 28px );
}

JavaScript

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

myApp.service('myFactory', function(){
	return {
    	model: {
        	data_1: 'This is data 1',
            data_2: 'This is data 2'
        }
    }
});

myApp.controller('myController', ['$scope', '$filter', 'myFactory', function($scope, $filter, myFactory){
	$scope.allData = myFactory;
	$scope.myArray = ['foo','bar','baz','qux','quux'];
    $scope.myString = false;
    $scope.timeValue = 0;
    $scope.goMan = function(e){
    	console.log(e);
    };
    
}]);



myApp.directive('myToggle', function(){
	return {
    	restrict: 'E',
        replace: true,
        scope: {
        	'ngModel': '='
        },
        template: '<div ng-class="switchClass()"><span></span><a ng-click="switchValue()"></a></div>',
        link: function($scope, $element){
        
        	$scope.switchClass = function(){
            	return $scope.ngModel ? 'pos-toggle-on' : 'pos-toggle';
            };
        	
            $scope.switchValue = function(){
            	$scope.ngModel = !$scope.ngModel;
            };
        
        
        
        
        
        
        }
    }
});