2014-09-23 25 views
1

我已經達到了一個完整的塊,並可以真正使用一些見解,我可能會做錯在這裏。我有頂部搜索欄和下面的查看區域來加載不同的模板。當index.html加載時,SearchController(在search-controller.js中)加載並等待提交。在使用DailySearchController(在daily-search-controller.js中)的-the-day.html的平均時間ng-view加載中,可以說是填充當天的數據。 DailySearchController和SearchController共享相同的服務(search-service.js)。直到這一點,數據填充,一切都很好。

現在,當我輸入數據到輸入字段並點擊提交時,client-search.html模板加載到查看(最多),表單數據發送到控制器,到服務(這似乎到目前爲止還可以),然後回到控制器,在那裏我現在有問題。我可以看到,在Chrome插件Batarang中,json數據確實到達了我的$ scope對象,但它並沒有更新視圖。

的index.html

<html ng-app="MM"> 
...//everything included 
<body> 
<form ng-controller="SearchController" ng-submit="mmSubmitSearch()" class="submit-main" id="submitMain"> 
    <input ng-model="mmMdlSearchBox" class="mdl-search-box" id="mdlSearchBox" placeholder="find your quote..." type="text"> 
    </input> 
    <input type="submit" class="btn-submit" id="btnSubmit" value="Search"></input> 
</form> 
<div ng-view></div> 
</body> 
</html> 

客戶search.html

<ul class="ul-query"> 
    <li class="li-header"> QUOTE RESULTS...</li> 
    <li ng-repeat="resource in mmClientReq.quotes | orderBy:clientList" class="li-resource"> 
    <p class="p-resource">{{resource.quote}}</p> 
    <p class="p-resource-link"> 
    <a class="a-link" href="#/resource/search/link/version/{{resource.version}}/book/{{resource.book}}/chapter/{{resource.chapter}}"> Ch {{resource.chapter}}:{{resource.verse}}</a> 
    {{resource.book}}, {{resource.version}} 
    </p> 
    </li> 
</ul> 

的最day.html

<ul class="ul-query"> 
    <li class="li-header"> SOURCE OF THE DAY</li> 
    <li ng-repeat="resource in mmClientReqDaily.quotes | orderBy:clientList" class="li-resource"> 
    <p class="p-resource">{{resource.quote}}</p> 
    <p class="p-resource-link"> 
     <a class="a-link" href="#/resource/search/link/version/{{resource.version}}/book/{{resource.book}}/chapter/{{resource.chapter}}"> Ch {{resource.chapter}}:{{resource.verse}}</a> 
    {{resource.book}}, {{resource.version}} 
    </p> 
    </li> 
</ul> 

日常搜索controller.js

angular.module('MM.ControllerModule') 
    .controller('DailySearchController', ['$http', '$scope', 'SearchService', 
    function ($http, $scope, SearchService) { 
     getDailyReq(); 
     function getDailyReq() { 
     SearchService.getDailyReq() 
      .success(function(data) { 
      $scope.mmClientReqDaily = data; 
      }) 
      .error(function(data) { 
      ... 
      }); 
     }; 
}]); 

搜索controller.js

angular.module('MM.ControllerModule') 
    .controller('SearchController', ['$scope', '$location', 'SearchService', 
    function ($scope, $location, SearchService) { 
     $scope.mmSubmitSearch = function() { 
     var userData = this.mmMdlSearchBox; 
     $location.path('/resource/search'); 
     SearchService.getSearch(userData) 
      .success(function(data) { 
      $scope.mmClientReq = data; 
      }) 
      .error(function(data) { 
      ... 
      }); 
     }; 
}]); 

搜索service.js

angular.module('MM.ServiceModule') 
    .service('SearchService', ['$http', '$location', 
    function ($http, $location) { 

     var searchBaseURL = ('/resource/search/client-search?text='); 
     this.getDailyReq = function() { 
      return $http.get($location.path()); 
     }; 
     this.getSearch = function(searchURL) { 
      return $http.get(searchBaseURL + searchURL); 
     } 
}]); 

客戶search.html模板載荷視圖,但僅顯示標題,不會顯示一切。

+0

我對此並不完全確定,但你可能成爲模型中的事物的受害者。嘗試將所有數據添加到$ scope.myModel而不是$ scope。或者明確地將數據屬性添加到$ scope,以便Angular知道它已經改變。 – 2014-09-23 04:26:31

+1

任何機會,你可以把這個,所以我可以有一個小提琴? (或者撥弄這個,這樣我可以跳過它) – 2014-09-23 04:26:54

+0

你可以嘗試'$ scope。$ apply'來觸發摘要循環。 – Jorg 2014-09-23 05:26:10

回答

1

我對所發生的事情的解決方案是簡單地創建另一個控制器來顯示數據。搜索欄控制器從視圖中抓取數據並將其存儲在服務中。新的控制器分配給當天的html,抓取服務中存儲的數據並顯示它。

我認爲這是一個更好的方式來處理這種情況,以保持搜索控制器管理主頁面和模板。謝謝大家的意見。