Angularjs 在angular模板中包含外部js小部件

我需要包括脚本标记，它将在我的angularjs模板上呈现小部件

例如，我会包括这个

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>

---

但角度不会渲染它

由于100widgets脚本操作DOM并将其他

标记添加到HTML文件中，因此无法正常工作。 Morover其中一些小部件是基于Flash的，因此脚本添加了对SWF对象的引用。 我认为一种可能性是在src属性中分析请求到url的输出（在您的示例中），并尝试将相应的DOM操作和脚本添加到希望小部件出现的模板中

下面的示例显示了一个页面（第1页）不起作用（只需在键入时添加脚本标记）和第二个页面（第2页），其模板包含显示日历小部件所需的插入

PS：由于沙盒限制，此代码段无法在此工作，因此；在调试模式下尝试此代码笔版本：，或创建您自己的版本，该版本部署在本地web服务器上

（函数（）{
"严格使用",；
有棱角的
模块（'myApp'，['ui.router']）。
配置（configRouteProvider）。
控制器（'AppCtrl'，AppCtrl）；
函数AppCtrl（$location，$rootScope）{
$rootScope.$on（“$stateChangeStart”，onStateChangeStart）；
函数onStateChangeStart（事件、toState、toParams、fromState、fromParams、选项）{
console.log（'From:'，fromState.name，
“to:”，toState.name）；
}
}
函数configRouteProvider（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（“家”{
url:“/”，
templateUrl:'views/home.html'
})
.state（'page1'{
url:“/pag1”，
templateUrl:'views/page1.html'，
})
.州（第2页）{
url:“/pag2”，
templateUrl:'views/page2.html'，
});
$urlRouterProvider。否则（'/'）；
}
}());
正文{
边际：0px；
}
人力资源{
边际：0px；
}
.标签{
填充：8px；
背景色：黑色；
颜色：白色；
}
.表a，
.表a：已访问，
.选项卡a：活动，
.a:悬停{
颜色：白色；
}
.我的账单{
身高：100%；
宽度：100%；
位置：绝对位置；
填充：8px；
}


家
呜呜呜呜

第1页
使用script type=“text/javascript”。。。不工作：

第2页
变通办法

由于安全限制，Angular不会解析模板内的标签。

然后，您所指的小部件正在使用document.write。页面加载完成后，Document.write将不可用。

所以，这里似乎没有简单的出路

然而，正如您正在尝试做的，这在创建的addscript中是非常常见的。解决这个问题的方法。轮到我了，我创建了一个利用这个库的小指令

在模板中，它将如下所示：


该指令：

  function psScr($document) {
    return {
      restrict: 'A',
      scope: {
        psSrc: '@'
      },
      link: link
    }

    function link(scope, elm) {
      if (typeof postscribe !== 'undefined') {
        postscribe(elm[0], `<script src='${scope.psSrc}'></script>`);
      } else {
        // If postscibe isn't loaded, first load the needed libarary
        var script = document.createElement('script');
        script.src = 'https://gitcdn.xyz/repo/krux/postscribe/master/dist/postscribe.js';
        script.onload = function () {
          // once postscibe is in, kick it into action.
          link(scope,elm); 
        };
        document.head.appendChild(script);
      }
    }
  }

  angular.module('psSrcModule', [])
    .directive('psSrc', psScr);

功能psScr（$document）{
返回{
限制：“A”，
范围：{
psSrc:“@”
},
链接：链接
}
功能链接（范围，elm）{
如果（postscribe的类型！==‘未定义’）{
后记（elm[0]，``）；
}否则{
//如果postscibe未加载，请首先加载所需的库
var script=document.createElement（'script'）；
script.src=https://gitcdn.xyz/repo/krux/postscribe/master/dist/postscribe.js';
script.onload=函数（）{
//一旦postscibe投入使用，立即投入使用。
链接（范围，elm）；
};
document.head.appendChild（脚本）；
}
}
}
角度模块（'psSrcModule'，[]）
.指令（“psSrc”，psScr）；

你可以

不过，并非所有的小部件都能与postscribe配合使用，其中一些小部件似乎在html中显示了一些人工制品。我目前没有时间找出谁应该为此负责（100widgets或postscribe），但如果您真的需要，这是可以解决的。
出现控制台错误吗？没有错误，只是没有渲染任何内容。顺便说一句，我使用的是AngularJSV1.3.4。你能提供更多的代码吗？角度代码是什么？你想把这个脚本放在哪里，目的是什么？如果我把这个模板放在html文件中（不是角度的），它会呈现，如果你把上面的代码放在任何角度的视图中，它不会呈现。