Javascript 如何使用angularjs在html中包含一个html文件_Javascript_Html_Angularjs

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

javascript html angularjs

Javascript 如何使用angularjs在html中包含一个html文件,javascript,html,angularjs,Javascript,Html,Angularjs,我的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/ja

我的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>

我在主index.html文件中包含了两个html文件，这两个文件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>

我剩下的两个html文件存在于文件夹partials中，在执行index.html时，我无法将form.html和airport.html包含在index.html文件中，如果您对此有任何想法，请让我知道，谢谢…..

您是否确实设置了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>

控制台中是否有任何错误？您使用的是哪个角度版本？试试$scope.sidebyURL='/partials/airport.html'；您可以构建自己的自定义指令来实现任何您想要的。k，它在plunker中工作，但在eclipse中不工作。您可以在eclipse中检查它吗？谢谢，对不起，我是WebStorm用户

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>