Angularjs - $ scope не обновляет представление с помощью $ http.get api - PullRequest
Новая
       18

Angularjs - $ scope не обновляет представление с помощью $ http.get api

0 голосов
/ 08 октября 2018

Я использую 2 разных вызова API для отображения статей с сайта WordPress.Первый API отображает список названий компаний, и оттуда я должен использовать соответствующий идентификатор, чтобы сделать второй вызов API, чтобы отобразить все статьи об этой конкретной компании.Все работает нормально с представлением, отображающим список названий компаний> правильный список статей об этой компании> и выбранной конкретной статье.

Проблема:

Когдащелкается ссылка (название компании), в представлении отображаются статьи, относящиеся к этой компании, но когда я нажимаю кнопку «Назад» в браузере, чтобы вернуться к списку названий компаний, чтобы перейти по другой ссылке, представление по-прежнему отображаетсяданные предыдущего клика (не новая информация по другой ссылке).Кажется, что область не обновляется новым вызовом API, когда щелкают по другой ссылке.Как я могу решить эту проблему?

Все поможет, очень ценится!

app.js - вот мои маршруты: 

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: '/'
        });
});

1-й вызов API для отображения списка названий компаний: 

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);
    });
}]);

Просмотр списка: 

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

2-й вызов 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);
    });
}]);

Просмотрстатей из 2-го вызова API: 

<div class="container" ng-controller="CompanyController">
    <div ng-repeat="article in articles">
        <div class="section-article">
            <a href="#/{{ article.id }}/{{ article.slug }}/{{ $index }}"><img class="img-article" ng-src="{{ article.better_featured_image.source_url}}" /></a>
            <h2 class="article-title">{{ article.title.rendered }}</h2>
            <small>{{ article.date | date }}</small>
            <p>{{ article.excerpt.rendered }}</p>
        </div>
    </div>
</div>
...