AngularJS Directive 2

This example shows how to use AngularJS directives to wrap jQuery plugin.

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
    
    <head>
        <meta charset="utf-8">
        <title>My AngularJS App</title>
    </head>
    
    <body ng-controller="stageController">
         <h1>Plot: {{type}}</h1>

        <div id="ctrls">
            <p class="button" ng-click="utopia();">Utopia</p>
            <p class="button" id="nightmare">Nightmare</p>
            <br/>
            <p class="button red" id="broken">Doesn't work</p>
            <p class="button green" ng-click="initData();">Restore</p>
        </div>
        <div id="debug">
             <h2>Actual value of data:</h2>

            <ul>
                <li ng-repeat="d in data">{{d}}</li>
            </ul>
        </div>
        <!-- directive -->
        <div id="container" draw-pie-chart=""></div>
    </body>

</html>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style> .ng-invalid {
    border: 1px solid red;
}
body {
    padding:10px;
}
h1 {
    font-size:24px;
    font-weight:bold;
}
#debug {
    border:1px solid #999999;
    color:#999999;
    padding:10px;
    position:absolute;
    top:46px;
    right:20px;
    width:140px;
    z-index:10;
}
#debug h2 {
    color:#333333;
    font-size:16px;
    margin-bottom:5px;
}
#debug li {
    font-size:14px;
    margin:3px 0 0;
}
#debug li:nth-child(even) {
    color:#000000;
}
#ctrls {
    position:absolute;
    z-index:10;
}
#container {
    margin:0 auto;
    width:210px;
}
.button {
    border:1px solid #666666;
    cursor:pointer;
    display:inline-block;
    font-size:14px;
    margin-top:10px;
    padding:5px 10px;
    text-align:center;
    width:90px;
}
.button.red {
    border-color:#FF0000;
    color:#FF0000;
}
.button.green {
    border-color:Green;
    color:Green;
}

JavaScript

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives']);


/* Controllers */

function stageController($scope) {

    $scope.type = 'Browser Market Share';

    $scope.initData = function () {
        $scope.data = [
            ['Chrome', 47.0],
            ['Firefox', 33.0],
            ['IE', 20.0]
        ];
    }

    $scope.utopia = function () {
        $scope.data = [
            ['Chrome', 99.0],
            ['Firefox', 1.0],
            ['IE', 0.0]
        ];
    }

    $scope.initData();

}


/* Directives */

angular.module('myApp.directives', []).

directive('drawPieChart', function () {
    // return the directive link function. (compile function not needed)
    return function (scope, element, attrs) {

        var container = $(element).attr("id");

        // watch the expression, and update the UI on change.
        scope.$watch('data', function () {
            drawPlot();
        }, true);

        var broken = function () {
            scope.data = [
                ['Chrome', 33.3],
                ['Firefox', 33.3],
                ['IE', 33.3]
            ];
        };

        var nightmare = function () {
            scope.$apply(function () {
                scope.data = [
                    ['Chrome', 0.0],
                    ['Firefox', 1.0],
                    ['IE', 99.0]
                ];
            });
        };

        var drawPlot = function () {
            var chart;
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: container
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: ''
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
            ...