CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-controller
Markus
Markus

Reputation: 45

angular view not updating when scope changes in controller (after form submit)

I'm very new to angular so I may be going about this all wrong but here goes. I have a form

<form name="search_form" novalidate ng-submit="searchForm(search_form.$valid)" >
  <div class="maincontainer">
    <div class="formcontainer">What to eat?</div>
    <div class="formcontainer"><input type="text" name="food_type" ng-model="food_type" placeholder="Enter a search term" required></div>
    <div class="formcontainer">Where to look?</div>
    <div class="formcontainer">  <input type="text" name="cityname" ng-model="trader.cityname" value="cityname"  googleplace="" placeholder="Enter a location" required>
  </div>

  <div class="formcontainer">
    <button type="submit" class="btn-main2" >Submit</button>
  </div>
</form>

that when I submit I want to grab the results based on the location I get from google and display them in a new view

myControllers.controller('SearchCtrl',['$scope','Search','$location', function ($scope,Search,$location) {

  $scope.setSearchLocation = function(place){

    $scope.lat = place.geometry.location.lat();
    $scope.lng = place.geometry.location.lng();
  }

  $scope.searchForm = function() {
    // check to make sure the form is valid
    if (!$scope.search_form.$valid) {
      alert('Please fill out all fields');
    }
    else{
      $scope.results = Search.do_search($scope.lat,$scope.lng);
      $location.path('search-results');
    }
  };   

}])
.directive('googleplace', function() {
  return {
    require : 'ngModel',
    link : function(scope, element, attrs, model) {
      var options = {
          types : [],
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0],options);

      google.maps.event.addListener(scope.gPlace, 'place_changed',function() {
        var place = scope.gPlace.getPlace();
        scope.setSearchLocation(place);
        scope.$apply(function() {
          model.$setViewValue(element.val());  
        });
      });
    },

  };
});

everything works as expected except the view does not update in the results view. If I set the $scope.results out side the searchForm() function everything renders properly. I realize this is because it exists before the page renders, just saying that part works.

when I try $scope.$apply() it says already in progress

<div id="results-container" ng-repeat="result in results">
        <div id="picbox"><img src="../images/test.jpg" alt="" "/></div>
          <div id="addressinfo">
            <h4>John's Restaurant  </h4>
            <p>123 York Street, Toronto ON <br>
              <span id="type">#
            Burgers, #Poutine</span></p>
          </div>
          <div id="location">4.2m<br>
            <img src="../images/heart.png" width="86" height="76" alt=""/><br>
          </div>
        </div>
      </div>

Upvotes: 0

Views: 937

Answers (1)

yazaki
yazaki

Reputation: 1632

When you call $location.path(...), $scope object of controller is always initialized.

My suggestion is ...

  1. write the element of div#results-container on the same template where form[name=search_form] exists.

  2. remove $location.path('search-results');

I hope this could help you.

Upvotes: 1

Related Questions