在 angularjs 应用程序中包含 tripadvisor 小部件 [英] Including tripadvisor widget in angularjs app

问题描述

我是 angularjs 的新手.我想向我的 angularjs 应用程序添加一个 tripadvisor 小部件.小部件代码是这样的:

<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>
<script src="http://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=791&amp;locationId=2227230&amp;lang=en_US&amp;border=true"></脚本>

这是我的问题:它没有从我的 angularjs 应用程序加载底部的脚本.

解决方案

因此不幸的是，基于大量搜索，没有任何方法可以使用纯 angular 来做到这一点.在脚本标签上使用ng-include"、基于模板的指令甚至ng-src"都可以下载脚本，但默认情况下它们不会运行.

因为我猜您不想修改旅行顾问代码，所以我能找到的最佳选择是调用 jQuerygetScript"，如下所示:

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

我将其简化为如下所示的指令:

app.directive("widgit", function ($sce, $timeout) {返回 {链接:函数(范围、元素、属性){scope.$watch("attrs.widgit", function () {$.getScript(scope[attrs.widgit].script);element.append(angular.element(scope[attrs.widgit].widgit));});}};});

如果你想看到这个工作，看看下面的 plunker:http://plnkr.co/edit/QmxgcPujnjtqUgECeLC3?p=preview

最后一个非常重要的事情是，trip advisor 中包含的脚本实际上只是调用了另一个脚本标签.根据我的判断，您不能直接使用此脚本 - 相反，您必须手动跟踪该脚本标记到实际值.换句话说:

• 请勿使用: -//www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=791&locationId=2227230&lang=en_US&border=true
• 改为: -//www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;uniq=791&border=true&lang=en_US&locationId=2227230

总而言之，我认为这应该可以满足您的需求.祝你好运！

更多详情

因此，根据后续工作，我在示例中添加了路由并再次重现了该问题，这次是使用 ng-view.这里的基本问题仍然是在加载视图后旅行顾问代码没有运行.基本上所有需要做的就是添加以下几行代码(在代码呈现之后):

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

在这之后你最终得到的是以下工作 plunker:http://plnkr.co/edit/fqQXnx0uyckuVkxOZq6n?p=preview.

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.

解决方案

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&lang=en_US&border=true&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.

这篇关于在 angularjs 应用程序中包含 tripadvisor 小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！