angularjs – 在角度模板中包含外部js小部件

我需要包含脚本标签,它将在我的 angularjs模板上渲染小部件.

例如我会包括这个

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

但是角度不会渲染.

由于100widgets脚本操纵DOM并添加其他< script> HTML文件的标签无法正常工作.
Morover其中一些这些小部件是基于Flash的,所以脚本添加了对SWF对象的引用.
我认为一种可能性是分析src属性(在你的例子中为 http://100widgets.com/js_data.php?id=106)的url请求的输出,并尝试将相应的DOM操作和脚本添加到您希望该窗口小部件显示的模板中.

以下是一个示例,显示页面(第1页)NOT WORKING(简单地添加了您键入的脚本标签)和第二页(第2页),其模板具有显示日历窗口小部件所需的插入.

PS：由于沙盒限制,这个代码片段在这里无法在SO上运行;在调试模式：http://codepen.io/beaver71/pen/MyjBoP中尝试此CodePen版本,或在本地Web服务器上创建自己的版本.

(function() {
  'use strict';

  angular.
  module('myApp',['ui.router']).
  config(configRouteProvider).
  controller('AppCtrl',AppCtrl);

  function AppCtrl($location,$rootScope) {
    $rootScope.$on('$stateChangeStart',onStateChangeStart);

    function onStateChangeStart(event,toState,toParams,fromState,fromParams,options) {
      console.log('From:',fromState.name,'to:',toState.name);
    }
  }

  function configRouteProvider($stateProvider,$urlRouterProvider) {
    $stateProvider
      .state('home',{
        url: '/',templateUrl: 'views/home.html'
      })
      .state('page1',{
        url: '/pag1',templateUrl: 'views/page1.html',})
      .state('page2',{
        url: '/pag2',templateUrl: 'views/page2.html',});
    $urlRouterProvider.otherwise('/');
  }

}());

body {
  margin: 0px;
}
hr {
  margin: 0px;
}
.tabs {
  padding: 8px;
  background-color: black;
  color: white;
}
.tabs a,.tabs a:visited,.tabs a:active,.tabs a:hover {
  color: white;
}
.my-tab {
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 8px;
}

<!DOCTYPE html>
<html>

<head>
  <Meta charset="UTF-8">
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://code.angularjs.org/1.4.0/angular.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js'></script>
</head>

<body ng-app="myApp" ng-controller="AppCtrl as app">
  <div class="tabs">
    <a href="#" ui-sref="home">Home</a>
    <a href="#" ui-sref="page1">Page1</a>
    <a href="#" ui-sref="page2">Page2</a>
  </div>
  <hr />
  <div ui-view></div>

  <script id="views/home.html" type="text/ng-template">
    <div class="my-tab">
      <h3>Home</h3>
      <p>bla bla bla</p>
    </div>
  </script>

  <script id="views/page1.html" type="text/ng-template">
    <div class="my-tab">
      <h3>Page1</h3>
      <p>Using script type="text/javascript"... NOT WORKING:</p>
      <script type="text/javascript" src="http://100widgets.com/js_data.PHP?id=106"></script>
    </div>
  </script>

  <script id="views/page2.html" type="text/ng-template">
    <div class="my-tab">
      <h3>Page2</h3>
      <p>Workaround</p>
      <!--code1-->
      <div class="scriptcode">
        <!--ecode1-->
        <a target='_blank' href='http://100widgets.com/calendars/106-calendar.html'>
          <embed align="middle" id="calendar" width="170" height="156.111111111" allowscriptaccess="always" quality="high" salign="lt" wmode="transparent" src="http://100widgets.com/js-files/postit.swf?UTCoffset=0&amp;gid=0&amp;text1=St Valentines is on 14th February 2012&amp;&amp;event_time=&amp;rec=&amp;rnd=0&amp;gha=0&amp;ghb=0&amp;ghf=1&amp;gbc=FFB200&amp;gfc=040244&amp;gtc=F9F9FF&amp;gnu=http://mycalendar.org/widget/&amp;fna=&amp;ims="
          type="application/x-shockwave-flash" />
        </a>
        <!--code2-->
      </div>
      <!--ecode2-->
      <!--below commented cause it's not necessary -->
      <!--script type="text/javascript">
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = "http://100widgets.com/stat.js.PHP";
        document.body.appendChild(js);
      </script-->
    </div>
  </script>
</body>

angularjs – 在角度模板中包含外部js小部件

猜你在找的Angularjs相关文章