切换路由时如何加载 ng-repeat？答案

【问题标题】：How to load ng-repeat when switching with routes?切换路由时如何加载 ng-repeat？
【发布时间】：2019-03-29 01:35:00
【问题描述】：

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

我尝试在 index.html 上使用 ng-click 调用该函数，但没有成功。

路线：

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

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

【问题讨论】：

如果我正确理解了您的问题，您还可以使用 route.resolve({PROMISE}) 使数据在路线更改时可用。
感谢您选择我的答案 Marko，请同时检查另一种方法。您可以根据自己的用例选择任何人

标签： angularjs

【解决方案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>

或者，您可以在$routeProvider 中使用resolve：

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

【讨论】：