由第3方JS将角度解析/评估/执行JS加载到指令模板中

Question

我搜索了hi和lo，但找不到与我的特定情况相关/有用的帖子。

我有一个加载各种小部件的应用程序，其中一些加载了包含需要执行的第三方JS的JSONP。

我已经能够一直将JS加载到小部件元素（指令模板）中，但是，我无法弄清楚如何真正地执行该JS。

我曾考虑过可能在编译时执行此操作，但是对此还很陌生，因此不确定是否正确。 我尝试使用eval（），但是没有用。 我尝试了。$ digest和。$ apply，但是那也不起作用。 我只需要让JS执行即可，就好像我将其放入HTML中且没有任何Angular。 当我通过基本的jquery / HTML页面执行此操作时，它可以按预期工作。

以下是相关代码：

angular.module('protoApp')
.directive('thirdPartyWidget',['$http',function($http){
    return {
        restrict: 'E',
        scope: {},
        template: '<div id="myWidget"></div>',
        replace: true,
        link: function($scope, $el, $attrs){
            $http({
                method: 'JSONP',
                responseType: 'jsonp',
                url: $scope.url,
                data: thirdPartyWidgetProperties
            })
            .then(function(response){

                // this will properly insert JS into my $el
                // but this JS will not do anything/run.
                $el.append(response.data.html);
            });
        }
    }
}]);

（我知道我应该在这里直接使用服务而不是$ http，但是我只是想让它尽可能简单地工作。）

例如，其中一个JS脚本用于Google Analytics（分析）。 我期望在将JSONP加载到$ el之后，应该像在非AngularJS版本中一样向GA请求。

当我检查DOM时，可以看到脚本确实被附加到$ el中，但是它没有运行或没有执行应做的事情。 就像这样：

<div class="ng-isolate-scope"><div id="remoteProfiles"></div><script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-99999-99', 'website_name.com');
    ga('send', 'pageview');
</script>
<script type="text/javascript">...3rd party widget stuff...</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>
<!--<script src="//requirejs.org/docs/release/2.1.11/comments/require.js"></script>--></div>

所以，看，它在那里。 我如何使其真正运行？

任何信息，建议，帖子，任何您能指向我的地方都将不胜感激。

Answer 1

因此，我完成这项工作的唯一方法是，将所有初始化JS基本上全部放到Angular之外。 它加载的代码是令人难以置信的。 它加载了require并完成了许多requireJS的工作，而Angular只是对此做了个有趣的表情。 它使用JS逻辑加载HTML，以便将其全部封装为任何站点。 Angular只是扼杀了脚本标签，并且不想处理任何标签。

我确实有一个版本，其中所有代码都在index.html文件中，我的指令中只有div和ID。 这很丑，我想继续寻找。

使用这篇文章（ AngularJS：如何在ng-include内制作角度加载脚本？ ）和此指令（ https://gist.github.com/subudeepak/9617483#file-angular-loadscript-js ），我能够得到我所有要加载到指令模板中的脚本。 我确实必须创建几个全局变量（$ document和$ window不能使它们可用于模板中的脚本），但是它比在index.html文件中包含所有内容干净得多。 如果指令从不加载，那么我的额外脚本也不会加载。

我确实放弃了有关该指令的所有内容，只是将它带入并直接将其合并到我现有的体系结构中（已经有一个类似这样的模块，不需要闭包了）。