我需要在我的AngularJS模板中包含一个脚本标签,以便渲染小部件。
例如,我会包含这个:
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>
但是 Angular 不会渲染它。
我需要在我的AngularJS模板中包含一个脚本标签,以便渲染小部件。
例如,我会包含这个:
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>
但是 Angular 不会渲染它。
<script>
标签,因此可能无法正常工作。此外,其中一些小部件是基于Flash的,因此脚本会添加对SWF对象的引用。我认为一种可能性是分析src属性中url的请求输出(在您的示例中为http://100widgets.com/js_data.php?id=106),并尝试将相应的DOM操作和脚本添加到您希望小部件出现的模板中。(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"></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"></script>
</body>
<script>
标签。然而,正如您所尝试做的那样,这是在添加脚本中非常常见的事情,krux创建了postscribe。绕过此问题的方法。我创建了一个使用此库的小指令。
在您的模板中,它看起来像这样:
<div ps-src="http://100widgets.com/js_data.php?id=21"></div>
该指令:
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);
你可以在这个plunk中看到它的效果
然而,并不是所有的小部件都能与postscribe很好地配合使用,其中一些似乎在HTML中显示了一些瑕疵。我目前没有时间去找出是谁导致了这个问题(100widgets还是postscribe),但如果你真的需要这个功能,这是可以解决的。