我需要包含脚本标签,它将在我的
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操作和脚本添加到您希望该窗口小部件显示的模板中.
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&gid=0&text1=St Valentines is on 14th February 2012&&event_time=&rec=&rnd=0&gha=0&ghb=0&ghf=1&gbc=FFB200&gfc=040244&gtc=F9F9FF&gnu=http://mycalendar.org/widget/&fna=&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>