11 Replies Latest reply on Feb 26, 2018 10:20 AM by Chandra Shetty

    AngularJS integration

    Aaron Judy

      We are currently working on rewriting our website using AngularJS.  Our current site is a .Net site that uses Tableau visualizations.  We'd like to move the visualizations over to the Angular site, but aren't having much luck on the implementation.

       

      We'd love to be able to encapsulate all of the javascript API calls (Tableau) within a controller in Angular, however, it appears as though we need to write jquery to essentially modify the DOM in order to use the Tableau javascript API.

       

      Ideally, we'd like to do something like this:

       

      app.controller('tableauController',['$http', 'objectAPIService', '$scope', '$stateParams', '$sessionStorage', '$sce',

          function ($http, objectAPIService, $scope, $stateParams, $sessionStorage, $sce) {

              this.tableauHTML = $sce.trustAsHtml("<div>this is html returned from the Tableau javascript API</div>");

          }]);

       

      However, it looks like the only way to make this work is to actually put script on the HTML page that looks something like this:

       

      var placeholderDiv = document.getElementById("tableauViz");

      var url = "http://my-server/views/my-workbook/my-view";

      var options = {

        hideTabs: true,

        width: "800px",

        height: "700px",

        onFirstInteractive: function() {

        // The viz is now ready and can be safely used.

        }

      };

      var viz = new tableau.Viz(placeholderDiv, url, options);

       

      Has anyone had any luck integrating with the javascript API from an angular controller?