Angular controller variables not showing

Question

I have built a small Angular component into one of my websites that I am having a few issues with. I have defined a controller for my application but the view is not pulling through any of the variables or functions from the controller and I am not sure why. Here is my code:

This is my file to define the controllers:

angular.module('clubFilter.controllers', []).
controller('clubController', function($scope, $http, googleMapService) {
    $scope.clubsJSON = JSONItems;
    $scope.clubs = $scope.clubsJSON;
    if(searchTerm == "" && activity == "") {            
        $scope.clubs = $scope.clubsJSON;    
        console.log($scope.clubs);
    } else if (searchTerm != "" && activity == "") {

    } else if (searchTerm == "" && activity == "") {

    } else if (searchTerm != "" && activity != "") {

    }
    ........

Here is my angular app file:

var clubFilter = angular.module("clubFilter", [
'clubFilter.controllers',
'clubFilter.services'

]);

And here is my HTML view:

<div ng-app="clubFilter" ng-cloak class="col-lg-12" ng-controller="clubController">
<div class="col-lg-3" id="clubs-filter-left">
    <form ng-submit="filterClubs()">
        <input type="text" name="location" ng-model="searchTerm" placeholder="Search..." />
        <input type="submit" name="submit" value="Submit" />
    </form>
    <div id="searchInfo" ng-show="(searchTerm != '') || (activityText != '')">
        <span ng-show="searchTerm != ''"><strong>Location:</strong> {{searchTerm}}</span>
        <span ng-show="activityText != ''"><strong>Activity:</strong> {{activityText}}</span>
        <span class=''>(Distance indicated in miles)</span>
    </div>
    <div id="activityInfo" ng-show="activityText != ''">
        <p>Your nearest Leisure Centres with {{activityText}} facilties</p>
    </div>
</div>
<div class="col-lg-9" >     
    <ul class="leisure-centres">            
        <li ng-repeat="club in clubs" ng-show="club.show">              
            <div class="centre">
                <a class="link" ng-href="http://isca01.bigwavemedia.info{{club.link}}">More info</a>
                <a class="link" ng-show="club.distance > 0" ng-href="{club.link}" ng-cloak>{{club.distance}}m</a>           
                <div class="image" ng-show="club.image > 0">
                    <img src="{{image}}" alt="{{club.title}}" />                        
                </div>
                <div class="details">
                    <div class="title">
                        <h3>{{club.title}}</h3>
                    </div>
                    <div class="address">
                        {{club.building}},
                        {{club.street}},
                        {{club.city}},
                        {{club.county}},
                        {{club.postcode}}                           
                    </div>
                    <div class="tel">
                        <strong>Tel: </strong>
                        <a href="tel:{{club.telephone}}" ng-bind="club.telephone"></a>
                    </div>
                    <div class="email">
                        <strong>Email: </strong>
                        <a href="mailto:{{club.email}}" ng-bind="club.email"></a>
                    </div>
                </div>
            </div>
        </li>           
    </ul>
</div>

When the page loads, the $scope.clubs object is supposed to be looped through and then show in an ng-repeat in the view. This doesn't not seem to be happening though, Can anyone see why this is not working? I have checked the structure of the object and it is fine and has been working before. Thanks

Edited to add the JSONitems object structure:

[
Object { 
    id="1", 
    title="Ashington Leisure Centre", 
    description="<p>Ashington Leisure Cen...ase give us a call.</p>", more...}, 
Object { 
    id="2", 
    title="Beach Huts", 
    description="<p>A trip to the beautif...ings - 01670 542222</p>", more...}, 
Object { 
    ........

It's a Javascript object that is defined in the view.html (it's a Joomla custom component). It is working correctly as console.log shows the items in the object and I have also had this working before. — James
– James, Commented Oct 3, 2014 at 9:26
I added a test scope variable to the scope (just a string) and it seemed to work. It doesn't like my $scope.clubs object anymore which is strange as it did before. It comes from PHP and is JSON encoded. Is this an issue? — James
– James, Commented Oct 3, 2014 at 9:33

SrAxi · Accepted Answer · 2014-10-03 09:25:45Z

1

//app
angular.module('clubFilter', ['clubFilterControllers'])

//controller
clubFilterControllers.controller('viewController', ['$scope', '$http', 'googleMapService', 
   function($scope, $http, googleMapService){
   /* logic here */
}])

Try to define controller like that.

answered Oct 3, 2014 at 9:25

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rickard Staaf · Accepted Answer · 2014-10-03 09:17:21Z

0

You have aliased your controller but are not using the alias to access the data

<li ng-repeat="club in clubItem.clubs" ng-show="club.show">

answered Oct 3, 2014 at 9:17

Rickard Staaf

2,8702 gold badges17 silver badges15 bronze badges

1 Comment

James Over a year ago

Sorry, that was a mistake on my part. I had taken the alias out but forgot to copy the correct code in. The code has been amended in the initial question and I am still having the scope error.

Collectives™ on Stack Overflow

Angular controller variables not showing

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related