问题描述
我想用装载的Angularjs外部模板,因为这下面简单,
< DIV NG-包括='模板/的index.php'>< / DIV>
不过,这并不在浏览器上打印任何东西了。什么我错过了?
HTML中,
<!DOCTYPE HTML>
< HTML和GT;
< HEAD>
< META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8>
<标题> Angualr< /标题>
<间的charset =UTF-8>
<脚本SRC =JS / angular.min.js>< / SCRIPT>
<脚本SRC =JS / app.js类型=文/ JavaScript的>< / SCRIPT>
<脚本SRC =JS / maincontroller.js类型=文/ JavaScript的>< / SCRIPT>
< /头> <身体GT; < DIV NG-包括='模板/的index.php'>< / DIV> < /身体GT;< / HTML>
模板,
< DIV ID ='内容'NG-应用='MyTutorialApp'NG控制器='MainController'>
<输入类型='文本'NG-模式='SEARCHTEXT/>
< UL>
<李NG重复='人在人们|过滤:SEARCHTEXT'NG秀='person.live ==真正'>#{{person.id}} {{person.name}}< /李>
< / UL>
<输入类型='文本'NG-模式='newPerson/>
<按钮NG点击='ADDNEW()'>添加< /按钮>< / DIV>
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的,
< DIV NG-应用='MyTutorialApp'>
< DIV NG-包括='模板/的index.php'>< / DIV>
< / DIV>
模板/ index.php文件,
< DIV ID ='内容'NG控制器='MainController'>
<输入类型='文本'NG-模式='SEARCHTEXT/>
< UL>
<李NG重复='人在人们|过滤:SEARCHTEXT'NG秀='person.live ==真正'>#{{person.id}} {{person.name}}< /李>
< / UL>
<输入类型='文本'NG-模式='newPerson/>
<按钮NG点击='ADDNEW()'>添加< /按钮>< / DIV>
NG-包括寻找一个$ scope属性,所以你需要传递一个字符串,像这样: NG-包括=/模板/的index.php'
。
< DIV NG-包括=/模板/的index.php'>< / DIV>
什么你传递给它本质使得它看起来这在你的控制器: $范围['/模板/的index.php'] ='一些字符串';
你也引导在模板本身的角度 - 这样怎么可能被列入? NG-应用
需要在主页面,使 NG-包括
可以工作!
<有的元素NG-应用=对myApp>
<! - 这里,角工作的事情(假设你已经创建了一个名为对myApp的应用程序 - >
< DIV NG-包括=/模板/的index.php'>< / DIV>
< /有的-组件>
只需更换一些元素
的东西,如 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外部模板:模板无法加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!