javascript - Angular 解析/评估/执行由第 3 方 JS 加载到指令模板中的 JS

Question

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

我有一个加载各种小部件的应用程序，其中一些小部件加载包含需要执行的第 3 方 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 后，应该有一个对 GA 的请求，就像在非 AngularJS 版本中一样。

当我检查 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: How to make angular load script inside ng-include? )和这个指令( https://gist.github.com/subudeepak/9617483#file-angular-loadscript-js )，我能够将所有脚本加载到指令的模板中。我确实必须创建几个全局变量($document 和 $window 没有使它们可用于我的模板中的脚本)，但它比仅将所有内容都放在 index.html 文件中要干净得多。如果该指令从未加载，我的额外脚本也不会加载。

我确实放弃了该指令周围的所有内容，只是将其直接合并到我现有的架构中(已经有一个用于此类内容的模块，并且不需要关闭)。