在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

因此，不幸的是，基于大量搜索，没有任何方法可以使用纯角度进行此操作。在脚本标签上使用“ ng-include”，基于模板的指令甚至“ ng-
src”都可以下载脚本，但默认情况下它们不会运行。

由于我猜您不想修改旅行顾问代码，因此我能找到的最佳选择是将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

最后一个真正重要的事情是旅行顾问提供的脚本实际上只是调用了另一个脚本标签。根据我的判断，您不能直接使用此脚本-
相反，您必须手动将该脚本标记跟随到实际值。换一种说法：

• 不要使用： -//www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=791&locationId=2227230&lang=zh_CN&border=true
• 而是： -//www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;uniq=791&border=true&lang=en_US&locationId=2227230

总而言之，我认为这应该为您提供所需的东西。祝你好运！

更多细节

因此，根据后续操作，我向示例添加了路线，并再次使用ng-
view重现了该问题。这里的基本问题仍然是，加载视图后，旅行顾问代码无法运行。本质上，对前一个所做的所有工作就是添加以下几行代码（在代码呈现之后）：

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

在此之后，您最终得到的是以下可用的插件：http
://plnkr.co/edit/fqQXnx0uyckuVkxOZq6n?p=preview 。