如何使用angularjs在HTML中包含一个HTML文件

Question

我的主要html页面在index.html下面给出

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <div class="container" ng-controller="AppCtrl">

        <h1>AngulAir</h1>

        <div>
            <ul>
                <li ng-repeat="airport in airports">
                <a href="" ng-click="setAirport(airport.code)">{{airport.code}}-{{airport.city}}</a>
                -<a href="" ng-click="editAirport(airport.code)">Edit</a>
                </li>
            </ul>
            <p ng-show="currentAirport">currentAirport:{{currentAirport.name}}</p>
        </div>
        <p ng-show="editing.name"><input type="text" ng-model="editing.name" value=""/></p>
        <div ng-include="sidebyURL"></div>
        <div ng-include="formURL"></div>

    </div>
</body>
</html>

我正在使用下面的app.js给出的javascript文件，该文件位于js / controllers文件夹中

function AppCtrl($scope) {
    $scope.airports = {
        "PDX" : {
            "code" : "PDX",
            "name" : "Portland International Airport",
            "city" : "Portland",
            "destinations" : [ "LAX", "SFO" ]
        },
        "STL" : {
            "code" : "STL",
            "name" : "Lampbert-St. Louis International Airport",
            "city" : "St. Louis",
            "destinations" : [ "LAX", "MKE" ]
        },
        "MCI" : {
            "code" : "MCI",
            "name" : "Kansas City International Airport",
            "city" : "Kansas City",
            "destinations" : [ "SFO", "LAX" ]
        },
    };

    $scope.currentAirport=null;
    $scope.sidebyURL='partials/airport.html';
    $scope.formURL='partials/form.html';
    $scope.setAirport = function(code) {
        $scope.currentAirport = $scope.airports[code];
    };
    $scope.editAirport = function(code) {
        $scope.editing = $scope.airports[code];
    };

}

我在主index.html文件中包括2个html文件，其中2个文件airport.html是

<div ng-show="currentAirport">
    <h3>{{currentAirport.name}}</h3>
    <h4>Destinations</h4>
    <ul>
        <li ng-repeat="destination in currentAirport.destinations">
            {{destination}}
        </li>
    </ul>
</div>

而另一个form.html是

<div ng-show="editing">
    <h3>Edit Airport</h3>
    <input type="text" ng-model="editing.name" value=""/>
</div>

我剩下的2个html文件都存在于partials文件夹中，并且在执行index.html时，如果您有关于这些的任何想法，则无法在form.html和airport.html中包含这些信息，请告诉我。 ...

Answer 1

您是否实际设置了scope.editing和scope.currentAirport以便ng-show返回true？ 我已经将您的代码复制并粘贴到了plunker并按预期工作

List: <button ng-repeat="airport in airports" ng-click="setAirport(airport.code)">{{airport.code}}</button>
    Edit: <button ng-repeat="airport in airports" ng-click="editAirport(airport.code)">{{airport.code}}</button>

http://plnkr.co/edit/wQt5wrTkE8YXwOaKacBq

如何使用angularjs在HTML中包含一个HTML文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-02-02 10:22:42

如何使用angularjs在HTML中包含一个HTML文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-02-02 10:22:42

解决方案1
0 已采纳 2015-02-02 10:22:42