Angularjs ng-include 不包括任何视图
Angularjs ng-include not including any view
我一直在尝试按如下方式设置我的ng-include:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Airports</h1>
<div ng-controller="AppCtrl">
<div>
<div>
<ul>
<li ng-repeat="airport in airports">
<a href="" ng-click="setAirport(airport.code)">
{{airport.code}} - {{airport.name}}
</a> -
<a href="" ng-click="editAirport(airport.code)">
Editar
</a>
</li>
</ul>
<p ng-show="currentAirport">Current airpot: {{currentAirport.name}}</p>
</div>
<!--el ng include le indica que puede incluir un scope (.html)-->
<div ng-include src="formURL"></div>
</div>
</div>
</body>
</html>
我的 JS 脚本(应用程序.js):
function AppCtrl ($scope){
$scope.airports={
"STL":{
"code":"STL",
"name":"Lambert-St Airport",
"city":"san louis",
"destinations": [
"LAX",
"MKE"
]
}
};
$scope.formURL= 'partials/form.html';
$scope.currentAirport = null;
$scope.setAirport = function (code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function (code) {
$scope.editing = $scope.airports[code];
};
}
最后形成.html
<div ng-show="editing">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
我试图显示表单,更改网址,编写完整的网址,但它似乎不起作用。虽然当我点击机场时,页面显示正确。
如果有人能指出我正确的方向,那就太好了。对不起,这个巨大的帖子,它需要一些解释才能使其连贯。希望这是有道理的。谢谢。
My directory:
exampleAngular
|_css
|_img
|_js
|_controllers
|_app.js
|_lib
|_angular.min.js
|_angular-resource.min.js
|_partials
|_form.html
|_airport.html
|_index.html
Andyrooger提供的plunker无需修改即可正常工作,但是您应该更改一些内容。
1)将指令用作属性时,ng-include
不带src
使用,因此应ng-include="formUrl"
2) 使用对象属性而不是整个对象ng-show
将 HTML 更改为,
<div ng-show="editing.airport">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
还要注意作用域继承,更改控制器
$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]
根据你的评论,你的formURL
似乎不正确......
你把它设置在这一行上
$scope.formURL= 'partials/form.html';
但是你说你的表单.html与索引.html在同一个目录中。 formURL
是相对于 index.html 所在的目录的路径。所以要么
将表单.html放入部件目录中 (angularexample/partials/form.html)
或
这样设置
formURL
$scope.formURL= 'form.html';
相关文章:
- 是否有任何事件“;在$scope摘要完成时”;或“;在视图刷新时”;在Angular.js中
- 可以'在使用Javascript/AjaxMVC之后,不会返回到任何视图
- Angularjs ng-include 不包括任何视图
- 我正在使用带有 c# 代码的 Asp.net,我有一个带有网格视图的页面,我想使用没有任何 ajax 的 javascr
- 使用角度剑道列表视图不显示任何结果
- 如何从骨干视图中正确删除任何必要的内容
- 直接从rails视图发送javascript的任何问题
- 如何在网格视图中查询asp按钮文本以查看是否有任何文本值
- 找不到“”;应用程序“;模板或视图.任何东西都不会被渲染Emberjs RailsAPI
- 对控制器的两个不同视图中的任何元素使用相同的id
- MVC:有没有任何方法可以在视图中创建捆绑包
- 如何动态重新加载任何slickgrid数据视图
- 启动主干集合更改事件,但视图中没有任何更改
- 找不到“”;应用程序“;模板或视图.对象{fullName:“template:application”}将不呈现任何内
- 花式滚动条(任何基于指令的)在ng视图中都不起作用
- 任何视图模型dom更新的Knockout JS事件
- 是否有任何库可以实现灵活的网格视图
- FullCalendar没有'不要添加任何事件(周视图、议程视图)
- 单击整行的任何部分时,触发网格视图的选定索引更改事件
- 使用详细信息视图,在Page_Load(或任何地方)期间是否有任何方法只显示非空字段?