我正在尝试将srcHTML<script>元素的属性绑定到我的 angular 控制器中的变量，以便我可以从控制器更新它而无需处理任何 UI。
到目前为止，我已经尝试了所有这些选项：
<script type="text/javascript" ng-src="{{sourceUrl}}"></script>
<script type="text/javascript" src="{{sourceUrl}}"></script>
<script type="text/javascript" ng-src="sourceUrl"></script>
在我的控制器中，我有：
$scope.sourceUrl = "https://<some url goes here>";
在设置 $scope.sourceUrl 后在浏览器中运行页面时，没有对 sourceUrl 的传出请求，所以我确定我做错了什么。有任何想法吗？
我发现了几篇关于元素src属性的帖子<img>，ng-src应该像他们说的那样工作，但我想<script>有些不同。
不幸的是，您不能以这种方式使用 Angular。Angular 仅在页面加载和构建之后处理网页，此时<script>标记已被处理一次（脚本标记只运行一次）。其他标签（例如，img在页面加载后其属性发生变化时会更改屏幕的视觉外观……但如前所述，脚本仅处理一次，甚至在页面加载期间以及在 Angular 获得控制之前）。
您可以从控制器中将其动态添加到正文的末尾：
$("<script>").attr({src: $scope.sourceUrl}).appendTo("body");
根据@Jonathan 的建议添加我的解决方案作为答案。
(function (ng) {
// Retrieve main app module
var appModule = angular.module('appModule');
// This directive appends a child <script> element to an element with 'my-container' attribute.
// This is needed for 'src' attribute generation and script evaluation of some object after the
// page has been loaded.
appModule.directive('myContainer', ['$log', 'MvcModelService', function ($log, MvcModelService) {
return {
restrict: 'A',
scope: false,
link: function (scope, elem, attrs) {
var s = document.createElement("script");
s.type = "text/javascript";
var JSObjectName = "JSObject";
// Just a random number ...
var randomNumber = Math.floor(Math.random() * Number.MAX_VALUE);
// flowId is a UUID representing current session.
var flowId = MvcModelService.FlowId;
// Construct the url where the object contents will be loaded from:
var Url = MvcModelService.UrlPrefix + "Get" + whatever + "/" + JSObjectName +
"someOtherStuffDepending on flowId and randomNumber";
s.src = Url;
$log.info("Adding script element to MyContainer with source url: " + Url);
elem.append(s);
}
};
}]);
}(angular));
视图片段如下：
<div id="JSObjectScript" style="display: inline" my-container />
@Kolban 是对的，无论如何您都可以尝试创建脚本元素，添加 src attr，然后将其附加到模板中。例如：
var exampleController = function() {
controller.exampleController= [ '$sce',function($sce) {
//Remember to set the src as a trusted src
var trustedSrc = $sce.getTrustedUrl("www.example.com");
var scriptElement = document.createElement('script');
//Add attributes
scriptElement.setAttribute("data-size", '1220x700' );
scriptElement.setAttribute("src", trustedSrc);
//Append the srcipt to some element in the template
var elementContainer = angular.element('#elementToAppend');
elementContainer.append(scriptElement);
}]
return controllers;
}
尽管脚本标签可能只能插入一次，但您可以添加更多脚本标签。
<script ng-repeat="script in scripts" ng-src="{{script.src}}"></script>
在您的控制器中，只需将更多对象推{src: 'foo.js'}送到脚本数组和快速加载的脚本中。
这是一个证明这一点的 Plunker：http ://plnkr.co/edit/6QuwuqsGoyrASk8FKmu2?p=preview