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="MyApp">
    <div ng-controller="MyController">
    
        Top of the div you just clicked = {{top}}.<br/>
        Id of the div you just clicked = {{lastId}}.<br/>

        <div id="notADirective" class="myClass" ng-click="update($event)">
            Not a directive.  Click me.
        </div>
        
        <my-div element-id="isADirective" cls="myClass" callback="update">
            I'm a directive.  Click me.
        </my-div>
            
</div>

CSS

.myClass {
    background-color: #DA0000;
    position: absolute;
}
#isADirective {
    top: 300px;
}
#notADirective {
    top: 100px;
}

JavaScript

angular.module('components', [])
    .controller('MyController', function ($scope) {

    $scope.lastId = '';
    $scope.top = '';
        
    $scope.update = function (event) {
        console.log($scope.$id);
        var myDiv = getFirstMyClassAncestor(event.target);
        var style = window.getComputedStyle(myDiv);
        $scope.top = style.top;
        $scope.lastId = myDiv.id;
        console.log("You just clicked " + $scope.lastId + " and its top is " + $scope.top);
    }

    function getFirstMyClassAncestor(element) {
        while (element.className.indexOf('myClass') < 0) {
            element = element.parentNode;
        }
        return element;
    }


}).directive('myDiv', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        controller: 'MyController',
        scope: {
            cls: '@',
            elementId: '@',
            callback: '='
        },

        template: '<div id="{{elementId}}" class="{{cls}}" ><div ng-click="callback($event)">HERE</div><div ng-transclude></div></div>'
    }
});

angular.module('MyApp', ['components'])