Basic Tableau Directive

tableau.directive.js

var components = angular.module('components', []);

components.directive('tableau', function() {

    return {
        restrict: 'EA',
        scope: {
            url: '=',
            sheets: '=',
            width: '=',
            height: '='
        },
        template: '<div class="tableau-viz"></div>',
        link: function(scope, element, attrs) {
            var $el = $(element[0]);

            scope.$watch('url', function(newVal, oldVal) {
                scope.render();
            }, true);

            scope.viz = null;
            scope.sheetNames = [];

            var getInfo = function() {
                console.log(scope.viz);
                var workbook = scope.viz.getWorkbook();
                var sheetsInfo = workbook.getPublishedSheetsInfo();
                sheetsInfo.forEach(function(sheet) {
                    scope.sheetNames.push(sheet.getName());
                });
            };


            scope.render = function() {

                console.log(typeof scope.viz);

                if(scope.viz) {
                    // cleanup
                    scope.viz.dispose();
                }

                // invalid properties
                if(!scope.url) {
                    console.log('invalid properties');
                    return;
                }

                console.log(scope.width);
                console.log(scope.height);

                var width = scope.width ? scope.width : '100%',
                    height = scope.height ? scope.height : '100%',
                    url = scope.url,
                    hideTabs = true,
                    hideToolbar = true;

                var workbook, activeSheet;
                var viz = new tableau.Viz(element[0], url, {
                    width: width,
                    height: height,
                    hideTabs: hideTabs,
                    hideToolbar: hideToolbar,
                    onFirstInteractive: function() {
                        console.log('tableau is interactive...');
                        workbook = viz.getWorkbook();
                        activeSheet = workbook.getActiveSheet();
                        getInfo();
                    }
                });

                scope.viz = viz;

            };

        }

    };

});