Compiled Directive

Compiled Directive

by modar al nashar

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<div ng-app="app" ng-controller="main">

    <div>   
    <p progressbar prog="Progress" ></p>
            <span>
                <input type="button" value="add 10" ng-click="AddProgress(10)">
                <input type="button" value="subtract 10" ng-click="AddProgress(-10)">
                </span>
                current Progress : {{Progress}}
    </div>
</div>

JavaScript

angular.module("app", [])
        .controller("main", ['$scope', function($scope) {
            $scope.Progress='10';
            $scope.AddProgress = function (percentige) {
    $scope.Progress = parseInt($scope.Progress)+percentige; 
}
        }])
        .directive('progressbar', [function() {
            return {
                restrict: 'A',
                scope: {
                    'progress': '=prog'
                },
                template: '<div class="stripe" style="background-color: #C7D2D2; height:30px; width:100%;"> <div  ng-style="style" style="background-color:#FFFF00; height:100%"></div> </div>',
                controller: function($scope, $element, $attrs) {       
                 $scope.$watch(function() {
                        $scope.style = {"width": $scope.progress + "%"}
                    })
                }
            }
        }]);