Angularjs外部模板：模板无法加载？ [英] Angularjs external templating: the template cannot be loaded?
问题描述
我想用装载的Angularjs外部模板，因为这下面简单，
＆LT; DIV NG-包括='模板/的index.php'＆GT;＆LT; / DIV＆GT;
不过，这并不在浏览器上打印任何东西了。什么我错过了？
HTML中，
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT;标题＆GT; Angualr＆LT; /标题＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;脚本SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / app.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / maincontroller.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;身体GT; ＆LT; DIV NG-包括='模板/的index.php'＆GT;＆LT; / DIV＆GT; ＆LT; /身体GT;＆LT; / HTML＆GT;
模板，
＆LT; DIV ID ='内容'NG-应用='MyTutorialApp'NG控制器='MainController'＆GT;
＆LT;输入类型='文本'NG-模式='SEARCHTEXT/＆GT;
＆LT; UL＆GT;
＆LT;李NG重复='人在人们|过滤：SEARCHTEXT'NG秀='person.live ==真正'＆GT;＃{{person.id}} {{person.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;输入类型='文本'NG-模式='newPerson/＆GT;
＆LT;按钮NG点击='ADDNEW（）'＆gt;添加＆LT; /按钮＆GT;＆LT; / DIV＆GT;
JS / app.js，
VAR应用= angular.module（'MyTutorialApp'，[]）;
JS / maincontroller.js，
app.controller（MainController功能（$范围）{ $ scope.people = [
{
ID：0，
名称：莱昂，
音乐：
'岩'，
'金属'，
的Dubstep，
电
]
住：真
}，
{
ID：1，
名称：克里斯，
音乐：
'独立'，
Drumstep'，
的Dubstep，
电
]
住：真
}
];
$ scope.newPerson = NULL;
$ scope.addNew =功能（）{
如果（$ scope.newPerson = NULL＆放大器;！＆安培;！$ scope.newPerson =）{
$ scope.people.push（{
ID：$ scope.people.length，
名称：$ scope.newPerson，
住：真实，
音乐：
'流行'，
节奏蓝调，
'嘻哈'
]
}）;
}
}
}）;
编辑：
目录，
的index.html
JS /
...
...
模板/
的index.php
编辑2：
index.html的，
＆LT; DIV NG-应用='MyTutorialApp'＆GT;
＆LT; DIV NG-包括='模板/的index.php'＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
模板/ index.php文件，
＆LT; DIV ID ='内容'NG控制器='MainController'＆GT;
＆LT;输入类型='文本'NG-模式='SEARCHTEXT/＆GT;
＆LT; UL＆GT;
＆LT;李NG重复='人在人们|过滤：SEARCHTEXT'NG秀='person.live ==真正'＆GT;＃{{person.id}} {{person.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;输入类型='文本'NG-模式='newPerson/＆GT;
＆LT;按钮NG点击='ADDNEW（）'＆gt;添加＆LT; /按钮＆GT;＆LT; / DIV＆GT;
NG-包括寻找一个$ scope属性，所以你需要传递一个字符串，像这样： NG-包括=/模板/的index.php'。
＆LT; DIV NG-包括=/模板/的index.php'＆GT;＆LT; / DIV＆GT;
什么你传递给它本质使得它看起来这在你的控制器： $范围['/模板/的index.php'] ='一些字符串';
你也引导在模板本身的角度 - 这样怎么可能被列入？ NG-应用需要在主页面，使 NG-包括可以工作！
＆LT;有的元素NG-应用=对myApp＆GT;
＆LT;！ - 这里，角工作的事情（假设你已经创建了一个名为对myApp的应用程序 - ＆GT;
＆LT; DIV NG-包括=/模板/的index.php'＆GT;＆LT; / DIV＆GT;
＆LT; /有的-组件＆gt;
只需更换一些元素的东西，如 HTML ，体或任何元素你想要的应用程式来工作。
I thought loading an external template with Angularjs is as simple as this below,
<div ng-include='template/index.php'></div>
But it does not print anything out on the browser. What have I missed?
The html,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angualr</title>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div ng-include='template/index.php'></div>
</body>
</html>
the template,
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
js/app.js,
var app = angular.module('MyTutorialApp',[]);
js/maincontroller.js,
app.controller("MainController", function($scope){
$scope.people = [
{
id: 0,
name: 'Leon',
music: [
'Rock',
'Metal',
'Dubstep',
'Electro'
],
live: true
},
{
id: 1,
name: 'Chris',
music: [
'Indie',
'Drumstep',
'Dubstep',
'Electro'
],
live: true
}
];
$scope.newPerson = null;
$scope.addNew = function() {
if ($scope.newPerson != null && $scope.newPerson != "") {
$scope.people.push({
id: $scope.people.length,
name: $scope.newPerson,
live: true,
music: [
'Pop',
'RnB',
'Hip Hop'
]
});
}
}
});
EDIT:
Directories,
index.html
js/
...
...
template/
index.php
EDIT 2:
index.html,
<div ng-app='MyTutorialApp'>
<div ng-include='template/index.php'></div>
</div>
template/index.php,
<div id='content' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
ng-include looks for a $scope property, so you need to pass it a string, like this: ng-include="'/template/index.php'".
<div ng-include="'/template/index.php'"></div>
What you were passing to it essentially makes it look for this in your controller: $scope['/template/index.php'] = 'some string';
You're also bootstrapping angular in the template itself - so how could it be included? ng-app needs to be in the main page so that ng-include can work!
<some-element ng-app="myApp">
<!-- in here, angular things work (assuming you have created an app called "myApp" -->
<div ng-include="'/template/index.php'"></div>
</some-element>
Just replace some-element with something like html, body or whatever element you want the app to work from.
这篇关于Angularjs外部模板：模板无法加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
