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="OuterController">
        <input type="button" value="Hello Outer" ng-click="alertHello()"/><br>
        <input type="button" value="World Outer" ng-click="alertWorld()"/></br>
        
        <div hello-world-calls-parent button-label="outer parent"></div>
        <div hello-world-no-parent button-label="outer no parent"></div>
        
        <hr>
        
        
        <div ng-controller="InnerController">
            <input type="button" value="Hello Inner" ng-click="alertHello()"/><br>
            <input type="button" value="World Inner" ng-click="alertWorld()"/><br>
            
            <div hello-world-calls-parent button-label="inner parent"></div>
            <div hello-world-no-parent button-label="inner no parent"></div>

        </div>
    </div>
</div>

JavaScript

angular.module('components', [])
    .controller('OuterController', function ($scope) {
        
        $scope.alertHello = function() {
            alert('Hello!');
        }
    }).controller('InnerController', function ($scope) {
        
        $scope.alertWorld = function() {
            alert('World!');
        }
    }).directive('helloWorldCallsParent', function () {
        return {
            restrict: 'A',
            scope: {
                buttonLabel: '@'
           },
            template: '<br><input type="button" value="Hello {{buttonLabel}}" ng-click="$parent.alertHello()"/><br>'
        }
    }).directive('helloWorldNoParent', function () {
        return {
            restrict: 'A',
            scope: {
                buttonLabel: '@'
           },
            template: '<br><input type="button" value="Hello {{buttonLabel}}" ng-click="alertHello()"/><br>'
        }
    });

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