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

所以不幸的是，基于大量的搜索，没有任何方法可以用纯角度来做到这一点。使用＆＃34; ng-include＆＃34;，基于模板的指令甚至＆＃34; ng-src＆＃34;在脚本标签上，所有人甚至可以下载脚本，但默认情况下他们不会运行它们。

由于我猜你不想修改旅行顾问代码，我能找到的最佳选择是调用jQuery＆＃34; getScript＆＃34;类似的东西：

$.getScript("//www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;uniq=791&amp;lang=en_US&amp;border=true&amp;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));
      });
    }
  };
});

如果您希望看到此工作，请查看以下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();
}

在此之后您最终得到的是以下工作人员：http://plnkr.co/edit/fqQXnx0uyckuVkxOZq6n?p=preview。

Answer 2

我稍微调整了answer by drew_w以便与＃34; selfserve＆＃34;审查/评级小工具TA有：

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

在HTML中使用：

(function() {

我已尝试关注此代码的angular style guide，因此是IIFE（开头有趣})();，最后有WaitForMultipleObjects）。我使用＆＃34;控制器作为＆＃34;语法，因此＆＃39; vm。＆＃39;在HTML中。

这是我的第一个指令，欢迎提供反馈/改进建议！： - ）

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

2 个答案: