Including tripadvisor widget in angularjs app

Question

Hi I am new to angularjs. I want to add a tripadvisor widget to my angularjs app. The widget code is like this:

<div id="TA_cdsratingsonlynarrow791" class="TA_cdsratingsonlynarrow">
    <ul id="iyuRVZr65vDT" class="TA_links 7KxSJIXjY">
        <li id="1CBynVB" class="pCniB1AS">
            <a target="_blank" href="http://www.tripadvisor.com/">
                <img src="http://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor" /></a>
        </li>
    </ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=791&amp;locationId=2227230&amp;lang=en_US&amp;border=true"></script>

Here is my problem: its not loading the script at the bottom from my angularjs app.

I opened a [plunker here](http://plnkr.co/edit/QmxgcPujnjtqUgECeLC3?p=preview) and everything looks fine. What is the issue you are trying to solve here? — drew_w, Mar 17 '14 at 12:49
hi i want to add lot of widget dynamically . I am using data-ng-include to include this html content — Sarath Pv, Mar 17 '14 at 13:23

drew_w · Accepted Answer · 2014-03-18T19:49:01.607

So unfortunately based on a ton of searching there isn't any way to do this with pure angular. Using "ng-include", a template based directive or even "ng-src" on a script tag all may even download the scripts but they won't run them by default.

Since I am guessing you don't want to modify the trip advisor code the best option I could find is to call the jQuery "getScript" something like:

$.getScript("//www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;uniq=791&amp;lang=en_US&amp;border=true&amp;locationId=2227230");

I took this and simplified it into a directive that looks like the following:

app.directive("widgit", function ($sce, $timeout) {
  return {
    link: function (scope, element, attrs) {
      scope.$watch("attrs.widgit", function () {
        $.getScript(scope[attrs.widgit].script);
        element.append(angular.element(scope[attrs.widgit].widgit));
      });
    }
  };
});

If you want to see this working take a look at the following plunker: http://plnkr.co/edit/QmxgcPujnjtqUgECeLC3?p=preview

One final really important thing is the script include from trip advisor actually just calls another script tag. From what I could determine you can't use this script directly - instead you have to manually follow that script tag to the actual value. In other words:

Don't Use: - //www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=791&locationId=2227230&lang=en_US&border=true
Instead: - //www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;uniq=791&border=true&lang=en_US&locationId=2227230

All in all, I think that should get you what you are looking for. Best of luck!

MORE DETAILS

So based on a follow up, I added routes to the example and reproduced the issue again, this time with the ng-view. The basic problem here is still that the trip advisor code isn't getting run after the view is loaded. Essentially all that needs done to the previous is to add the following few lines of code (after the code renders):

if (window.taValidate) {
  window.taValidate();
}

What you end up with after this is the following working plunker: http://plnkr.co/edit/fqQXnx0uyckuVkxOZq6n?p=preview.

hi i tried the above code . it is working fine if i put the
in my index.html . but i want to use that
in some partial views and load it into index.html . At that time the — Sarath Pv, Mar 18 '14 at 19:22
@user2910437 I added some more details to the end of the answer. If the revised answer works be sure to mark as correct! Thanks! — drew_w, Mar 18 '14 at 19:50
@drew_w I am trying implement the trip advisor. My js is as follows :
Its not working for me. Can you help me out? — Sanyam Jain, Apr 01 '15 at 12:02
If this is a different question than the one that is asked above I recommend asking this as a new question on stack. You can still certainly refer to this answer if you feel it is relevant — drew_w, Apr 01 '15 at 13:15

score 3 · Answer 2 · answered Jun 01 '15 at 12:03

I tweaked the answer by drew_w a little to work with the "selfserve" review/ratings widgets TA have:

(function() {
  'use strict';

  angular
    .module('myapp')
    .directive('tripadvisor', function () {
    return {
      restrict: 'E',
      scope: {
        location: '='
      },
      link: function (scope, element, attrs) {
        element.append(angular.element('<div id="TA_selfserveprop"></div>'));
        scope.$watch("location", function (n, o) {
          if (angular.isDefined(scope.location)) {
            var script = '//www.tripadvisor.com/WidgetEmbed-selfserveprop?&nreviews=5&locationId=' + scope.location + '&rating=true&border=true';
            $.getScript(script, function() {
              if (window.taValidate) {
                  window.taValidate();
              }
            });
          }
        });
      }
    };
  });
})();

Use in your HTML:

<tripadvisor location="vm.tripadvisor.locationId"/>

I've tried to follow the angular style guide for this code, hence the IIFE (that funny (function() { at the start and })(); at the end). I use the "controller as" syntax, hence the 'vm.' in the HTML.

This is my first directive, so feedback/improvement tips are welcome! :-)

Including tripadvisor widget in angularjs app

2 Answers2

Linked