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

Question

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>

Not sure if it's a problem right now but the directive is ng-submit, not ng-Submit — Phil
– Phil, Commented Apr 8, 2015 at 1:37
strange, not sure why that got capitalized here but it's lowercase on my screen. So no that's not the issue. The form submits fine. — Markus
– Markus, Commented Apr 8, 2015 at 1:52
I don't understand the intention of $location.path('search-results'). Let us know more detail of your html structure. Does the element of div#results-container exists on the same html with the element of form[name=search_form]? — yazaki
– yazaki, Commented Apr 8, 2015 at 1:54
I got it. The problem seems that you call $location.path. When you call $location.path, $scope object of SearchCtrl is initialized. — yazaki
– yazaki, Commented Apr 8, 2015 at 2:07

yazaki · Accepted Answer · 2015-04-08 02:13:50Z

1

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

My suggestion is ...

write the element of div#results-container on the same template where form[name=search_form] exists.
remove $location.path('search-results');

I hope this could help you.

answered Apr 8, 2015 at 2:13

yazaki

1,6421 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related