Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by jer2

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<div ng-app="HelloApp">
    <div ng-controller="MyController">
        <br>
            <my-div cls="myClass">Tops:<div ng-repeat="top in tops">Top = {{top}}</div></my-div>

    </div>
</div>

CSS

.myClass {
    background-color: #DA0000;
    width:100px;
    position: absolute;
}

JavaScript

angular.module('components', [])
    .controller('MyController', function ($scope) {
         
        
        /**
        $scope.logWidth = function() {
            var myDiv = document.getElementsByClassName('myClass')[0];
            var style = window.getComputedStyle(myDiv);
            console.log("width is", style.width);
        }
        
        $scope.increaseWidth = function() {
            var myDiv = document.getElementsByClassName('myClass')[0];
            var style = window.getComputedStyle(myDiv);
            var width = parseInt(style.width.replace('px', ''));
            var newWidth = width + 20;
            myDiv.style.width = newWidth + 'px';
            $scope.logWidth();
        }
        **/
        
        $scope.tops = [];
        $scope.appendNewTop = function() {
            var myDiv = document.getElementsByClassName('myClass')[0];
            var style = window.getComputedStyle(myDiv);
            $scope.tops.push(style.top);
            console.log("added top", style.top);
            $scope.$apply();
        }
        
        $scope.drag = function(event) {
            var startX = event.clientX;
            var startY = event.clientY;
            var elementToDrag = event.currentTarget;
            var origX = elementToDrag.offsetLeft;
            var origY = elementToDrag.offsetTop;
            var deltaX = startX - origX;
            var deltaY = startY - origY;
            
            document.addEventListener("mousemove", moveHandler, true);
            document.addEventListener("mouseup", upHandler, true);
            
            event.stopPropagation();
            event.preventDefault();

            function moveHandler(e) {
                var newX = e.clientX - deltaX;
                var newY = e.clientY - deltaY;
                elementToDrag.style.left = newX + "px";
                elementToDrag.style.top = newY + "px";
                e.stopPropagation();
            }
            
            function...