我一直尝试将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脚本(app.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];
};
}
最后是form.html
<div ng-show="editing">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
我试图显示表单,更改url,编写完整的url,但似乎不起作用。尽管当我单击机场时,页面仍正确显示。
如果有人能指出我正确的方向,那就太好了。对庞大的帖子很抱歉,它需要一些解释才能使其前后一致。希望这是有道理的。谢谢。
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提供的插栓无需更改即可正常工作,但是您需要更改一些事项。
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>
也要注意作用域继承,更改Controller
$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]