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

嗨,我是angularjs的新手.我想在我的angularjs应用程序中添加一个tripadvisor小部件.小部件代码如下:

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

所以不幸的是,基于大量的搜索,没有任何方法可以用纯角度来做到这一点.在脚本标签上使用"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));
      });
    }
  };
});

如果你想看到这个工作,看看下面的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.这里的基本问题仍然是在加载视图后没有运行trip advisor代码.基本上所有需要做的就是添加以下几行代码(在代码渲染之后):

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

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