angularjs - 在 angularjs 应用程序中包含 tripadvisor 小部件

Question

嗨，我是 angularjs 新手。我想向我的 angularjs 应用程序添加一个 tripadvisor 小部件。小部件代码如下:

<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>

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

Answer 1

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

因为我猜测您不想修改 Trip Advisor 代码，所以我能找到的最佳选择是调用 jQuery“getScript”，如下所示:

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

我将其简化为如下指令:

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));
      });
    }
  };
});

如果您想查看此功能，请查看以下插件:http://plnkr.co/edit/QmxgcPujnjtqUgECeLC3?p=preview

最后一件非常重要的事情是来自 Trip Advisor 的脚本实际上只是调用另一个脚本标签。据我所知，您不能直接使用此脚本 - 相反，您必须手动遵循该脚本标记到实际值。换句话说:

• 请勿使用: -//www.jscache.com/wejs?wtype=cdsatingsonlynarrow&uniq=791&locationId=2227230&lang=en_US&border=true
• 相反: -//www.tripadvisor.com/WidgetEmbed-cds ratingsonlynarrow?amp;uniq=791&border=true&lang=en_US&locationId=2227230

总而言之，我认为这应该能满足您的需求。祝你好运!

更多详细信息

因此，根据后续情况，我向示例添加了路由，并再次重现了该问题，这次是使用 ng-view。这里的基本问题仍然是加载 View 后旅行顾问代码没有运行。本质上，前面需要做的就是添加以下几行代码(在代码渲染之后):

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

在此之后，您最终会得到以下工作插件:http://plnkr.co/edit/fqQXnx0uyckuVkxOZq6n?p=preview .