如何包括AngularJS局部模板第三方JavaScript库？ [英] How to include 3rd party javascript libraries in AngularJS partial template?
问题描述
我有一个简单的例子来揣摩为什么我的角度局部模板不能加载其他JavaScript组件。
我使用1模板（singleArticleView.html）和父页面（blog.html）和我试图RUN_ prettify.js适用于一个简单的code段我的模板内。如果code为模板里面不起作用。如果我删除code和从子模板脚本标记，并将其纳入其工作正常父里面
我如何执行我的模板中的JavaScript库？我认为这是行不通的，因为DOM元素都加载后。
如何评估，如果在局部模板的内容，以便执行任何外部的JavaScript code操作DOM已经呈现？的
我AP preciate任何建议
这是code：
blog.html（家长）
＆LT;脚本SRC =〜/ AngularJS /控制器/ articlesController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =〜/ AngularJS /控制器/ singleArticleController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-8 COL-MD-偏移1＆GT;
＆LT; DIV数据-NG-视图＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
singleArticleView.html（模板）
＆LT;脚本SRC =〜/脚本/ RUN_ prettify.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =〜/内容/ prettify.css的rel =stylesheet属性/＆GT; ＆LT; DIV＆GT;
{{article.author}}
＆LT; pre类=prettyprint linenums郎HTML＆GT;
＆放大器; LT;！DOCTYPE HTML和放大器; GT;
＆放大器; LT; HTML和放大器; GT;
＆放大器; LT;头和放大器; GT;
＆放大器; LT;标题＆放大器; GT;演示| prettify.JS＆放大器; LT; /标题和放大器; GT;
＆放大器; LT; /头和放大器; GT;
＆放大器; LT;身体放大器; GT;
＆放大器; LT; H1和放大器; GT;！您好，世界和放大器; LT; / H1＆放大器; GT;
＆放大器; LT; /身体放大器; GT;
＆放大器; LT; / HTML＆放大器; GT;
＆LT; / pre＆GT; ＆LT; / DIV＆GT;
singleArticleControlle.js（控制器）
（函数（）{
VAR应用= angular.module（dbayona code）;
VAR singleArticleController =功能（$范围的DataService，$窗口，$ routeParams，$ SCE）{ $ scope.article = {};
$ scope.newComment = {};
//获取其评论文章中模板显示和添加一个新评论
//它使用ArticlesController.cs
dataService.getArticleById（$ routeParams.id）
。然后（功能（数据）{
//成功
$ scope.article =数据;
$ scope.myContent = $ sce.trustAsHtml（data.body）; }， 功能（）{
//错误
$ windows.location =＃/; }）; }
app.controller（singleArticleController，singleArticleController）;
}（））;
这是对角正常的行为，从模板剥离脚本标记。
我发现一对夫妇的解决方案，这依赖于你正在做什么。如果它是一个小脚本，你可以直接内嵌了，我喜欢这里这个解决方案还增加了一个懒加载类型的脚本标签：
/ *全球角度* /
（函数（NG）{
使用严格的; VAR应用= ng.module（'ngLoadScript'，[]）; app.directive（'脚本'，函数（）{
返回{
限制：'E'，
适用范围：假的，
链接：功能（范围，ELEM，ATTR）{
如果（attr.type ===文/ JavaScript的懒'）{
变量code = elem.text（）;
变种F =新功能（code）;
F（）;
}
}
};
}）;}（角））;
以上code来自这篇文章：<一href=\"http://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include\">AngularJS:如何使内部角度负载脚本NG-包括哪些内容？
问题是，它只是加载脚本标记之间的文本，并不会加载在的src 属性指定的文件。
一个不同的解决方案还修改脚本指令，使我们能够通过的src 属性加载外部JS文件，或从脚本标记之间。如果 SRC 未定义：
/ *全球角度* /
（函数（NG）{
使用严格的; VAR应用= ng.module（'ngLoadScript'，[]）; app.directive（'脚本'，函数（）{
返回{
限制：'E'，
适用范围：假的，
链接：功能（范围，ELEM，ATTR）
{
如果（attr.type ===文/ JavaScript的懒'）
{
变种S =使用document.createElement（脚本）;
s.type =文/ JavaScript的;
变种SRC = elem.attr（SRC）;
如果（SRC！==未定义）
{
s.src = SRC;
}
其他
{
变量code = elem.text（）;
s.text = code;
}
document.head.appendChild（多个）;
elem.remove（）;
}
}
};
}）;}（角））;
以上code片段来自这里
I have got a simple example to try to figure out why my angular partial template can not load another javascript component.
I am using 1 template (singleArticleView.html) and a parent page(blog.html)and i am trying to apply run_prettify.js to a simple code snippet inside of my template. If the code is inside of the template it does not work. If i remove the code and the script tags from the child template and include them inside of the parent it works properly
How can I execute that javascript library inside my template? I think it does not work because DOM elements have loaded later.
How can I evaluate if the content in the partial template is already rendered in order to execute any external javascript code to manipulate the DOM?
I appreciate any suggestion
It is the code:
blog.html (Parent)
<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 (template)
<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);
}());
This is normal behavior for angular, which strips script tags from templates.
I found a couple solutions, depending on exactly what you are trying to do. If it's a smaller script and you can just inline it, I like this solution here which adds a 'lazy-loading' type to the script tag:
/*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));
The above code comes from this post: AngularJS: How to make angular load script inside ng-include?
The problem is that it only loads the text between the script tags and won't load a file specified in the src attribute.
A different solution also modifies the script directive and allows us to load external js files via the src attribute, or from between the script tag if src is undefined:
/*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));
The above code snippet comes from here.
这篇关于如何包括AngularJS局部模板第三方JavaScript库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
