2014-10-03 146 views
0

我已經在我的一個網站中構建了一個小的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 { 
    ........ 
+0

控制器中的JSONItems來自哪裏? – 2014-10-03 09:15:44

+0

這是一個在view.html中定義的Javascript對象(這是一個Joomla自定義組件)。它正常工作,因爲console.log顯示對象中的項目,我也有過這個工作。 – devoncrazylegs 2014-10-03 09:26:44

+0

我添加了一個測試範圍變量的範圍(只是一個字符串),它似乎工作。它不再像我以前那樣奇怪我的$ scope.clubs對象。它來自PHP並且是JSON編碼的。這是一個問題嗎? – devoncrazylegs 2014-10-03 09:33:47

回答

1

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

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

嘗試t o定義這樣的控制器。

0

你別名您的控制器,但沒有使用別名來訪問數據

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

對不起,這是我的錯誤。我已經取消了別名,但忘記了複製正確的代碼。代碼在最初的問題中已經修改,我仍然有範圍錯誤。 – devoncrazylegs 2014-10-03 09:21:57