angular 当控制器中的范围发生变化时视图不更新（在表单提交后）

Question

我是 angular 的新手，所以我可能会把这一切都搞错了，但这里是。我有一个表格

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

当我提交时，我想根据我从 google 获得的位置获取结果并在新视图中显示它们

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());  
        });
      });
    },

  };
});

除结果视图中的视图未更新外，一切都按预期工作。如果我将 $scope.results 设置在 searchForm() 函数之外，一切都会正确呈现。我意识到这是因为它在页面呈现之前就存在，只是说那部分有效。

当我尝试 $scope.$apply() 时它说已经在进行中

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

Answer 1

当您调用$location.path(...)时，控制器的$scope对象总是被初始化。

我的建议是...

将 div#results-container 的元素写在 form[name=search_form] 存在的同一模板上。
移除$location.path('search-results');

希望对您有所帮助。

angular 当控制器中的范围发生变化时视图不更新（在表单提交后）

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

angularjs

angularjs-directive

angularjs-scope

angularjs-controller