Search code examples
angularjsangularjs-scopeangularjs-ng-include

Angular.js no scope in ng-include html template

I am learning as I go with my first Angular project and have ran into an issue.

Goal: When an link is clicked in a given .html template placed in with ng-include, I want it to change the value of $scope.selectedLocation

The issue: The value of $scope.selectedLocation does not change.

I read that the ng-include creates a child scope, so in order to change the parent scope variable, you could place $parent in front of the value. I have tried this and it does not work.

Main index page:

<body ng-app="photoApp" id="bodyDiv" >
    <div ng-controller="PhotoGallery">
        <div>
        <ng-switch on="selectedLocation" >
            <div ng-switch-when="home" >
                <div ng-include="'home.html'"></div>
            </div>
            <div ng-switch-when="loc1">
                <div ng-include="'file1.html'"></div>
            </div>
            <div ng-switch-when="loc2">
                <div ng-include="'file2.html'"></div>
            </div>
        </ng-switch>
        </div>
    </div>
</body>

home.html code:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" ng-click="selectedLocation='loc1'">
                Location 1
            </a>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" ng-click="selectedLocation='loc2'">
                Location 2
            </a>
        </div>
    </div>
</div>

photoApp.js code:

var photoApp= angular.module('photoApp', []);

westonPhotographyApp.controller('PhotoGallery', function($scope)
{

    $scope.selectedLocation ="home";
}
Solution

  • You seem to have misnamed your app variable. Either name westonPhotographyApp photoApp or vice-versa: 

    var photoApp = angular.module('photoApp', []);

photoApp.controller('PhotoGallery', function($scope) {
      $scope.selectedLocation ="home";
}

    Anyways, you could improve on your design: You could use controllerAs syntax. It names your controller and makes it accessible throughout descendant scopes:

    Index:

    <div ng-controller="PhotoGallery as pgCtrl">
  <div>
    <ng-switch on="selectedLocation" >
      <div ng-switch-when="home" >
        <div ng-include="'home.html'"></div>
        ...

    Home:

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" ng-click="pgCtrl.selectedLocation='loc1'">
                Location 1
            </a>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" ng-click="pgCtrl.selectedLocation='loc2'">
                Location 2
            </a>
        </div>
    </div>
</div>

    With your controller:

    photoApp.controller('PhotoGallery', function() {
    var vm = this;

    vm.selectedLocation ="home";
}