Lovely template for embbeding d3 element to AngularJS

d3+angularjs_directive_template.js

(function() {
    'use strict';

    /**
     * @ngdoc directive_template
     * @name app.controller:d3Directive
     * @author Dominik Maszczyk
     * @email [email protected]
     * @description
     * # d3Directive
     * Directive of the app
     */

    angular
        .module('d3-container')
        .directive('d3directive', ['$timeout', function($timeout) {
            return {
                restrict: 'EA',
                scope: {
                    data: "=",
                    static_data: "=",
                    methods: "="
                },
                compile: function(element_) {
                    var width, height,

                        d3.select(element_[0])
                        .classed("init", true),

                        //All object contruction which does not base on element_ and $scope

                        tip = d3.tip()
                        .attr('class', 'd3-tip')
                        .html(function(d) {
                            return;
                        });

                    //Place for purely functional... functions

                    return function($scope, element_) {
                        var element = element_[0];

                        //Construction calls and delare object based on element & $scope (also functions which are not purely... functional)

                        var init = function() {

                            //Process static_data

                            var resize_flag = false;
                            $scope.$watch(function() {
                                return element.clientWidth + element.clientWidth;
                            }, function() {
                                if (!resize_flag) { //if $timeout wasn't executed don't call it again
                                    resize_flag = true;
                                    $timeout(function() {
                                        resize();
                                        resize_flag = false;
                                    });
                                }
                            });

                            //declare event binding

                            $scope.$watchGroup(['data'], noinit(render)); //noinit = function (f) { return function(n,o){if(n!==o)f(n,o);};}; 

                            d3.select(element)
                                .classed("init", false);
                        };

                        var render = function() {

                            //All fun rendering steps

                            //Bind to data 
                            //.data( )

                            //Destroy
                            //.exit().remove()

                            //Enter
                            //.enter()

                            //Update
                            //.merge()
                        };

                        var resize = function() {

                            width = element.clientWidth;
                            height = element.clientHeight;

                            //update whatever base on width and height but is not update by render

                            render();
                        };

                        var init_watch = $scope.$watchGroup(['static_data', 'data'], function(n) { //Watch if we have all needed data
                            if (typeof n[0] === 'object' && typeof n[1] === 'object') {
                                init(); //Initialise graph/diagram
                                init_watch(); //Delete orginal watch
                            }
                        });
                    };
                }
            };
        }]);

})();