我一直尝试按如下方式设置我的 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 提供的 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>
还要注意范围继承,改变Controller
$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]
关于javascript - Angularjs ng-include 不包括任何 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20025695/