angularjs d3 word cloud

color_definition.js

var fill = d3.scale.category20();//define colors

controllers_app.js

(function(){
        angular.module('app',['angular-d3-word-cloud'])
            .controller('appController',['$window','$element',appController])
        function appController($window,$element){
            var self = this;
            self.height = $window.innerHeight * 0.5;
            self.width = $element.find('word-cloud')[0].offsetWidth;
            self.wordClicked = wordClicked;
            self.words = [
                {text: 'Angular',size: 25},
                {text: 'Angular2',size: 35}
            ]
    
            function wordClicked(text){
                alert(text);
            }
        }
    })()

directives.js

 angular.module('angular-d3-word-cloud', [])
            .directive('wordCloud', [wordCloud])
     function wordCloud() {
        return {
                restrict: 'E',
                scope: {
                    words: '=',
                    width: '=',
                    height: '=',
                    onClick: '='
                },
                template: '<div></div>',
                controller: ['$scope','$element', wordsCloudController],
                controllerAs: 'wordsCloudCtrl',
                bindToController: true
            };
            function wordsCloudController($scope, $element) {
                var self = this;
            }
     }

drawing.js

function drawListener(words) {
                    var wordsCloudSVGDiv = d3.select($element[0]);
                    wordsCloudSVGDiv.select('svg').remove();
                    wordsCloudSVGDiv.append('svg')
                        .attr("width", layout.size()[0])
                        .attr("height", layout.size()[1])
                        .append("g")
                        .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
                        .selectAll("text")
                        .data(words)
                        .enter().append("text")
                        .on("click", function(d) {//call back clicked text
                            if (self.onClick) self.onClick(d.text);
                        })
                        .on("mouseover", function() {//zoom in font-size
                            d3.select(this).transition().style("font-size", function(d) {
                                return d.size * 1.2 + 'px';
                            }).attr('opacity', 0.5)
                        })
                        .on("mouseout", function() {
                            d3.select(this).transition().style("font-size", function(d) {
                                return d.size + 'px';
                            }).attr('opacity', 1)
                        })
                        .style("font-size", function(d) {
                            return d.size + "px";
                        })
                        .style("font-family", "Impact")
                        .style("fill", function(d, i) {//fill colors by d3 category20
                            return fill(i);
                        })
                        .attr("text-anchor", "middle")
                        .attr('cursor', 'pointer')
                        .transition()
                        .attr("transform", function(d) {
                            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                        })
                        .text(function(d) {
                            return d.text;
                        })
                }

index.html

<div id="wordsCloud">
        <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" on-click="appCtrl.wordClicked">
        </word-cloud>
    </div>

layout_generator.js

var layout = d3.layout.cloud()
                    .padding(5)
                    .rotate(function() {
                        return ~~(Math.random() * 2) * 60;
                    })
                    .font("Impact")
                    .fontSize(function(d) {
                        return d.size;
                    })
                    .on("end", drawListener);

listener.js

 $scope.$watch(watchParameters, watchListener, true);
    /**
    * watch binding scope parameters
    */
    function watchParameters() {
      return self;
    }
    function watchListener(newVal, oldVal) {
                    var parameters = angular.copy(newVal);
                    if (angular.isUndefined(parameters.words) || angular.isUndefined(parameters.width) || angular.isUndefined(parameters.height)) return;
                    updateLayout(parameters.width, parameters.height, parameters.words)
                }

update_draw.js

 function updateLayout(width, height, words) {
                    layout.size([width, height])
                        .words(words);
                    layout.start();
                }