Как загрузить ng-repeat при переключении с маршрутов?

Question

Я хочу загрузить данные из API, когда я нажимаю на маршрут вместо кнопки у меня есть atm.

Я пытался вызвать функцию нажатием ng-click на index.html, но это не сработало.

маршруты:

import { app } from "../index";

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix("!");
    $routeProvider
        .when("/drivers", {
            templateUrl: "./src/pageDetails/drivers.html",
        })
        .when("/teams", {
            templateUrl: "./src/pageDetails/teams.html",
        })
        .when("/races", {
            templateUrl: "./src/pageDetails/races.html",
        });
});

контроллер приложения:

 import {app} from '../index';

 app.controller("api", function($scope, $http) {
$scope.Naziv = "Driver Championship Standings - 2013";
$scope.TopDrivers = function () {
    console.log("i been pressed");
    $http.get("https://ergast.com/api/f1/2013/driverStandings.json")
        .then(function successCallback(response) {
            $scope.drivers = response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
            console.log("response.data.MRData.StandingsTable.StandingsLists.0.DriverStandings");
            console.log(response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings);
        }, function errorCallback(response) {
            console.log("Unable to perform get request");
        });
}
 });

мой нг-повтор

<div ng-controller="api">
    <p>{{Naziv}}</p>
    <button ng-click="TopDrivers()">Test Rest</button>
    <div ng-repeat="x in drivers | orderBy: '+Points'">
        <div id="divRow">
            <table>
                <tr id="tableRow">
                  <td id="td1">Nb: {{x.position}}</td>
                  <td id="td2">
                    {{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}
                  </td>
                  <td id="td3">{{x.Constructors[0].name}}</td>
                  <td id="td4">Points{{x.points}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

index.html как называется маршрут

 <p class="leftText" id="firstPLEft">
   <img class="leftPictures" src="img/drivers.png" alt="DriversPng">
   <a href="#!drivers">Drivers</a>
 </p>

Я хочу загрузить API и дать мне результаты ng-repeat, когда я переключаюсь на маршрут, а не когда я нажимаю кнопку на маршруте.

Answer 1

Как насчет использования ng-init

<div ng-controller="api" ng-init="TopDrivers()">
    <p>{{Naziv}}</p>
    <buttonTest Rest</button>
    <div ng-repeat="x in drivers | orderBy: '+Points'">
        <div id="divRow">
            <table>
                <tr id="tableRow">
                  <td id="td1">Nb: {{x.position}}</td>
                  <td id="td2">
                    {{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}
                  </td>
                  <td id="td3">{{x.Constructors[0].name}}</td>
                  <td id="td4">Points{{x.points}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

---

Или вы можете использовать resolve в $routeProvider:

app.factory("someService", function($http){
    return {
        getData: function(){
            return $http.get("https://ergast.com/api/f1/2013/driverStandings.json");
        }
    };
});

и в конфигурации:

$routeProvider
    .when("/drivers", {
        templateUrl: "./src/pageDetails/drivers.html",
        controller: "api",
        resolve: {
        message: function(someService){
            return messageService.getData();
    }
    })
    .when("/teams", {
        templateUrl: "./src/pageDetails/teams.html",
    })
    .when("/races", {
        templateUrl: "./src/pageDetails/races.html",
    });

Пример демонстрации того, как его использовать