$http.get请求后视图未更新，已尝试多种方案仍无法解决

Hey there! Let's dig into why your country list isn't loading properly on page load. I see your code snippet is cut off, but let's fix the common issues and get this working:

First, simplify your get_countries function (avoid the promise anti-pattern) #

Your current code uses a manual $q.defer() which isn't necessary—$http.get() already returns a promise. Let's clean that up:

$scope.country_options = [];

function get_countries() {
  var url = "/dashboard-api/api/country/";
  // Return the $http promise directly, no need for defer
  return $http.get(url)
    .then(function(response) {
      // Return the actual country data to the next .then()
      return response.data.result;
    })
    .catch(function(error) {
      // Log errors so you can debug what's going wrong
      console.error("Failed to fetch countries:", error);
      // Re-throw the error so the init function can handle it too
      throw error;
    });
}

Fix and complete your init function #

You need to properly handle the promise from get_countries() and assign the data to $scope.country_options. Also, make sure to call init() when the controller loads:

function init() {
  get_countries()
    .then(function(countryData) {
      // Assign the fetched countries to your scope variable
      $scope.country_options = countryData;
      // Add a console log to confirm data is loaded (great for debugging)
      console.log("Countries loaded:", countryData);
    })
    .catch(function(error) {
      console.error("Error initializing country list:", error);
    });
}

// Trigger the init function when the controller loads
init();

Verify your HTML binding #

Make sure your HTML is correctly using the country_options variable. For a dropdown, it might look like this:

<select ng-model="selectedCountry" 
        ng-options="country.id as country.name for country in country_options">
  <option value="">Choose a country</option>
</select>

Or for a list view:

<ul>
  <li ng-repeat="country in country_options">{{ country.name }}</li>
</ul>

Quick debugging checks #

• Open your browser's Network tab and confirm the /dashboard-api/api/country/ request is successful, and that response.data.result has the country list you expect.
• Double-check that your controller is properly attached to your HTML (via ng-controller="YourControllerName").
• If you're using AngularJS components instead of controllers, swap $scope with this and update your HTML bindings to use controllerAs syntax.

内容的提问来源于stack exchange，提问作者benbenben