angularjs - 点NG-包括包含脚本指令的部分 [英] angularjs - Point ng-include to a partial that contains a script directive
问题描述
这是原来的问题的编辑：
在使用 NG-包括指令重复使用的所有网页上我的头HTML，有加载/稍有延迟渲染的顶部导航栏中。为了缓解这个问题，我试图指向 NG-包括来包含了header.html文件＆LT;脚本类型=文/ NG -template'ID ='了header.html＆GT; ...＆LT; / SCRIPT＆GT; ，使其pre-荷载分项。
但我似乎无法得到它的工作。直接的index.html坚持header.html中的内容时，这违背重用头code的目的，我只取得了成功。
有关脚本文档只给使用内联模板的一个例子，和 ngInclude 中的文档不使用剧本中的示例模板。
能否 ngInclude 加载使用角的剧本指令？
index.html的：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;测试与LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / bootstrap.css＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / custom.css＆GT;
＆LT;脚本的src ='的lib /角/ angular.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src ='JS / main.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT; DIV NG控制器=HeaderCtrl＆GT;
＆LT; DIV NG-包括SRC =header.url＆GT;＆LT; / DIV＆GT;
＆LT; - 当它在index.html的直接把脚本工作！
＆LT;脚本类型=文/ NG-模板ID =header.html中＆GT;
＆LT; DIV CLASS =导航栏导航栏固定顶＆GT;
＆LT; DIV CLASS =Navbar的内部＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; UL类=导航＆GT;
＆LT;立GT;
＆LT;一类=品牌的href =＃＆GT;测试与LT; / A＆GT;
＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;的One＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;二＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;三＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
- ＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
header.html中：
＆LT;脚本类型=文/ NG-模板ID =header.html中＆GT;
＆LT; DIV CLASS =导航栏导航栏固定顶＆GT;
＆LT; DIV CLASS =Navbar的内部＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; UL类=导航＆GT;
＆LT;立GT;
＆LT;一类=品牌的href =＃＆GT;测试与LT; / A＆GT;
＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;的One＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;二＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;三＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
main.js
使用严格的;
//我也试图与使用严格的;去除VAR对myApp = angular.module（'对myApp'，[]）;功能HeaderCtrl（$范围）{
$ scope.header = {名字：header.html中，网址：了header.html};
}
＆LT; DIV NG-包括SRC =header.url＆GT;＆LT; / DIV＆GT;
应
＆LT; DIV NG-包括SRC ='header.url'＆GT;＆LT; / DIV＆GT;
不知道这是由rjm226双引号是必要的'的意思。无论双人和单是必要的NG-包括。我被这个最近绊倒。
This is an edit of the original question:
When using the ng-include directive to reuse my header HTML on all pages, there is a slight delay in loading/rendering the top navbar. To alleviate the problem, I'm attempting to point ng-include to a header.html file that contains <script type='text/ng-template' id='header.html>...</script> so that it pre-loads the partial.
But I can't seem to get it to work. I've only had success when sticking the contents of header.html directly in index.html, which defeats the purpose of reusing the header code.
The docs for script only give an example of using an inline template, and the docs for ngInclude don't use script in the example templates.
Can ngInclude load a file that uses angular's script directive?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<script src='lib/angular/angular.js'></script>
<script src='js/main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<!-- script works when it is put directly in index.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
</div>
</script>
-->
</div>
</body>
</html>
header.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
</div>
</script>
main.js:
"use strict";
// I've also tried this with "use strict"; removed
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
<div ng-include src="header.url"></div>
should be
<div ng-include src="'header.url'"></div>
Not sure if this is what rjm226 meant by 'double quotes were necessary'. Both double and single are necessary for ng-include. I've been tripped up by this recently.
这篇关于angularjs - 点NG-包括包含脚本指令的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
