我有一个简单的例子来尝试找出为什么我的 Angular 部分模板无法加载另一个 JavaScript 组件。
我正在使用 1 个模板 (singleArticleView.html) 和一个父页面 (blog.html),并且我正在尝试将 run_prettify.js 应用于模板内的简单代码片段。如果代码位于模板内部,则该代码不起作用。如果我从子模板中删除代码和脚本标记并将它们包含在父模板中,则它可以正常工作
如何在我的模板中执行该 javascript 库?我认为它不起作用,因为 DOM 元素已稍后加载。
如何评估部分模板中的内容是否已呈现,以便执行任何外部 JavaScript 代码来操作 DOM?
我很感激任何建议
这是代码:
blog.html(父级)
<script src="~/AngularJS/Controllers/articlesController.js"></script>
<script src="~/AngularJS/Controllers/singleArticleController.js"></script>
<div class="row">
<div class="col-md-8 col-md-offset-1">
<div data-ng-view>
</div>
</div>
</div>
singleArticleView.html(模板)
<script src="~/Scripts/run_prettify.js"></script>
<link href="~/Content/prettify.css" rel="stylesheet" />
<div>
{{article.author }}
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
singleArticleControlle.js( Controller )
(function () {
var app = angular.module("dbayonaCode");
var singleArticleController = function ($scope, dataService, $window, $routeParams, $sce) {
$scope.article = {};
$scope.newComment = {};
//Get the article with its comments to show in the template and add a new comment
//It uses ArticlesController.cs
dataService.getArticleById($routeParams.id)
.then(function (data) {
//success
$scope.article = data;
$scope.myContent = $sce.trustAsHtml(data.body);
},
function () {
//error
$windows.location = "#/";
});
}
app.controller("singleArticleController", singleArticleController);
}());
最佳答案
这是 Angular 的正常行为,它会从模板中删除脚本标签。
我找到了几个解决方案,具体取决于您想要做什么。如果它是一个较小的脚本并且您可以内联它,我喜欢这里的解决方案,它将“延迟加载”类型添加到脚本标记:
/*global angular */
(function (ng) {
'use strict';
var app = ng.module('ngLoadScript', []);
app.directive('script', function() {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attr) {
if (attr.type === 'text/javascript-lazy') {
var code = elem.text();
var f = new Function(code);
f();
}
}
};
});
}(angular));
以上代码来自这篇文章:AngularJS: How to make angular load script inside ng-include?
问题在于它仅加载脚本标记之间的文本,而不会加载 src
属性中指定的文件。
另一种解决方案还修改了 script 指令,并允许我们通过 src
属性加载外部 js 文件,或者如果 src
未定义,则从脚本标记之间加载:
/*global angular */
(function (ng) {
'use strict';
var app = ng.module('ngLoadScript', []);
app.directive('script', function() {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attr)
{
if (attr.type==='text/javascript-lazy')
{
var s = document.createElement("script");
s.type = "text/javascript";
var src = elem.attr('src');
if(src!==undefined)
{
s.src = src;
}
else
{
var code = elem.text();
s.text = code;
}
document.head.appendChild(s);
elem.remove();
}
}
};
});
}(angular));
以上代码片段来自here .
关于javascript - 如何在 AngularJS 部分模板中包含第 3 方 JavaScript 库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30420703/