在angularjs应用程序及其他旅行小工具 [英] Including tripadvisor widget in angularjs app

问题描述

您好我是新来angularjs。我想一个登录窗口小部件添加到我的angularjs应用程序。窗口小部件code是这样的：

 ＆LT; D​​IV ID =TA_cdsratingsonlynarrow791级=TA_cdsratingsonlynarrow＆GT;
    ＆LT; UL ID =iyuRVZr65vDT级=TA_links 7KxSJ​​IXjY＆GT;
        ＆LT;李ID =1CBynVB级=pCniB1AS＆GT;
            ＆LT;目标=_空白的href =htt​​p://www.tripadvisor.com/＆GT;
                ＆所述; IMG SRC =htt​​p://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.pngALT =到/＆GT;＆下; / A＆GT;
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT;脚本src=\"http://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=791&amp;locationId=2227230&amp;lang=en_US&amp;border=true\"></script>
 

下面是我的问题：从我angularjs应用程序底部的未加载脚本

。

解决方案

因此​​，不幸的基于一吨的搜索没有任何办法用纯角做到这一点。使用NG-包括上的一个脚本标签的所有甚至可以下载脚本基于模板的指令，甚至是NG-SRC，但他们不会在默认情况下运行。

由于我猜你不想修改旅行顾问code我能找到的最好的选择是调用了jQuerygetScript加入是这样的：

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

我把这个和它简化成一个指令，如下所示：

  app.directive（widgit功能（SCE $，$超时）{
  返回{
    链接：功能（范围，元素，ATTRS）{
      范围。$表（attrs.widgit功能（）{
        $ .getScript（范围[attrs.widgit] .script）;
        element.append（angular.element（范围[attrs.widgit] .widgit））;
      }）;
    }
  };
}）;
 

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

最后一个真正重要的是剧本从旅行顾问包括实际上只是调用另外一个脚本标签。从我能决定你不能直接使用这个剧本 - 不是你必须手动按照脚本标签的实际值。换句话说：

• 不使用： - //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-视图。这里的基本问题仍然是该视图被加载后，旅行顾问code未得到执行。基本上所有需要做的previous是添加code以下几线（code渲染后）：

 如果（window.taValidate）{
  window.taValidate（）;
}
 

你到底是什么了之后，这是下面的工作plunker：的http：// plnkr.co/edit/fqQXnx0uyckuVkxOZq6n?p=$p$pview 。

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应用程序及其他旅行小工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！