Question

当我单击路线而不是具有atm的按钮时，我想从api加载数据。

我尝试用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");
        });
}
 });

我的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结果。

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",
    });

A sample demo on how to use it

使用路由切换时如何加载ng-repeat？

1 个答案: