CODEWITHSUNDEEP
javascriptangularjs
Antonio Cachuan
Antonio Cachuan

Reputation: 485

Angularjs ng-include not including any view

I keep trying to set my ng-include as follows:

<!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>

My JS script (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];
    };
}

And finally form.html

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

I have tried to show the form, changing the url, writing the complete url but it doesn't seems to work. Although when I click on the airports, the page shows correctly.

If anyone can point me in the right direction that'd be great. Sorry for the huge post, it needed a bit of explaining to make it coherent. Hopefully it makes sense. Thanks.

My directory:

exampleAngular
   |_css
   |_img
   |_js
   |_controllers
        |_app.js
   |_lib
        |_angular.min.js
        |_angular-resource.min.js
   |_partials
        |_form.html
        |_airport.html
   |_index.html

Upvotes: 1

Views: 1296

Answers (2)

Andyrooger
Andyrooger

Reputation: 6746

Going by your comments it seems your formURL is incorrect...

You set it on this line

$scope.formURL= 'partials/form.html';

but then you say your form.html is in the same directory as your index.html. formURL is a path relative to the directory that index.html is in. So either

  • Put form.html in a partials directory (angularexample/partials/form.html)

    or

  • Set formURL as so

    $scope.formURL= 'form.html';

Upvotes: 1

Index
Index

Reputation: 2381

The plunker provided by Andyrooger works fine without modification, there are however a few thing you should change.

1) ng-include is used without src when using the directive as an attribute, so it should be ng-include="formUrl"

2) Use object properties rather then the entire object on ng-show

Change HTML to,

<div ng-show="editing.airport">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>

Also be aware of scope inheritances, change Controller

$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]

Upvotes: 2

Related Questions