Блог

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

я попытался вызвать функцию с помощью ng-нажмите на 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");
        });
}
 });
  

мой ng-repeat

 <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 при переключении на маршрут, а не при нажатии кнопки в маршруте.

Как насчет использования 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",
    });
  

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