CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Hibebop
Hibebop

Reputation: 21

$scope not updating my view from controller

I have reached a total block and could really use some insight as to what I might be doing wrong here. I have search bar up top and a view area beneath it to load the different templates. When index.html loads, the SearchController (in search-controller.js) loads up and waits for a submit. In the mean time ng-view loads of-the-day.html which utilizes DailySearchController (in daily-search-controller.js), to populate an of-the-day data so to speak. Both DailySearchController and SearchController share the same service (search-service.js). Up until this point, the data populates and all is well.

Now, when I enter in data into the input field and hit submit, the client-search.html template loads in to view (up to ), the form data shoots to the controller, on to the service (which seems to be ok thus far), and back down to controller, where I am now having issues. I can see, in chrome addon Batarang, that the json data does get to my $scope object, but it is just not updating the view.

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>

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

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

daily-search-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) {
            ...
          });
      };
}]);

search-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) {
            ...
          });
      };
}]);

search-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);
        }
}]);

the client-search.html template loads in view, but only the header is displayed, everything else is not displayed.

Upvotes: 1

Views: 434

Answers (1)

Hibebop
Hibebop

Reputation: 21

My solution to what was happening, was simply to create another controller to display the data. The search bar controller grabs the data from the view and stores it in the service. The new controller, which is assigned to of-the-day.html, grabs the stored data in the service and displays it.

I think this was a better way to handle the situation anyway, as to keep the search controller from managing both main page and a template. Thank you all for your input.

Upvotes: 1

Related Questions