角度控制器变量不显示

Question

我已经在我的一个网站中构建了一个小的Angular组件，这是我遇到的一些问题。 我为我的应用程序定义了一个控制器，但视图并未从控制器中拉出任何变量或函数，我不知道为什么。 这是我的代码：

这是我的文件来定义控制器：

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 != "") { 

    } 
    ........ 

这是我的角度的应用程序的文件：

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

]）;

这里是我的HTML视图：

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

页面加载时，将$ scope.clubs对象应该通过被环，然后显示在视图中的NG-重复。这似乎并没有发生虽然，任何人都可以看到为什么这不起作用？我检查了对象的结构，它很好，并且一直在工作。 感谢

编辑补充的JSONitems对象结构：

[ 
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 { 
    ........ 

Answer 1

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

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

尝试t o定义这样的控制器。

Answer 2

你别名您的控制器，但没有使用别名来访问数据

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