Question

我正在使用2个不同的API调用来显示WordPress网站中的文章。第一个api显示公司名称列表，然后我必须使用相应的ID进行第二个API调用，以显示有关该特定公司的所有文章。在显示公司名称列表>有关该公司的文章的正确列表>以及所选的特定文章的视图中，一切正常。

问题：

单击链接（公司名称）后，视图将显示与该公司相关的文章，但是当我单击浏览器上的“后退”按钮以返回到公司名称列表以单击其他链接时，视图仍在显示上一次点击的数据（而不是其他链接上的新信息）。当单击其他链接时，好像没有使用新的API调用更新范围。我该如何解决这个问题？

任何事情都会有所帮助，非常感谢！

app.js-这是我的路线：

tr

第一次API调用以显示公司名称列表：

var app = angular.module('PMCompanies', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'views/home.html',
        })
        .when('/:id', {
            controller: 'CompanyController',
            templateUrl: 'views/company.html'
        })
        .when('/:id/:slug/:id', {
            controller: 'ArticleController',
            templateUrl: 'views/article.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

查看列表：

app.factory('companies', ['$http', function($http) {
        return $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=1')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
    }]);

app.controller('HomeController', ['$scope', 'companies',  function($scope, companies) {
    companies.success(function(data) {
        $scope.companies = data;
        console.log('companies', $scope.companies);
    });
}]);

使用公司名称中的唯一ID进行第二次API调用，以在新视图中显示文章列表：

<div class="container" ng-controller="HomeController">
    <div ng-repeat="company in companies" class="list">
        <a href="#/{{ company.id }}" class="company-name">{{ company.name }}</a>
    </div>
</div>

第二个API调用中的文章视图：

app.factory('articles', ['$http', '$routeParams', function($http, $routeParams) {
    return $http.get('https://examplepage.com/wp-json/wp/v2/posts?categories=' + $routeParams.id)
    .success(function(data) {
        return data;
    })
    .error(function(err) {
        return err;
    });
}]);

app.controller('CompanyController', ['$scope', 'articles', function($scope, articles) {
    articles.success(function(data) {
        $scope.articles = data;
        console.log('articles', $scope.articles);
    });
}]);

AngularJS-$ scope不使用$ http.get API更新视图

0 个答案: