Angularjs: как вызвать функцию контроллера после маршрутизации

Question

Angularjs: как вызвать функцию контроллера после маршрутизации

0

Я изучаю angularjs, и есть один аспект этого, который я пытаюсь понять.

Мое желаемое/ожидаемое поведение кода ниже:

Пользователь нажимает ссылку в Париже (якорный тег)
Маршрутизатор перехватывает запрос, загружает страницу paris.html в ng-view.
Функция getCity в контроллере получает данные и задает переменные области видимости, которые отображаются в выражениях london.html.

Тем не менее, я не могу понять, как настроить angularjs для использования функции getCity, когда страница html загружается в ng-view. Самое близкое, что я могу получить, это вызов функции getCity из самого CityController, поскольку это похоже на нежелательный эффект вызова функции, когда загружается все приложение (index.html), а не только при нажатии ссылки. Контроллер будет иметь несколько различных функций.

Я также знаю, что вы можете использовать ng-click для вызова функции контроллера, но я не уверен, как это будет работать с загрузкой html-страницы в ng-view через поставщика маршрутов.

Любая помощь будет оценена по достоинству. Пожалуйста, ознакомьтесь с приведенным ниже кодом из небольшого приложения, предназначенного для обучения:

index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>


</head>
<body>


        <ol>

            <li><a href="#/cities/paris">Paris</a></li>

        </ol>


        <div class="content-wrapper" ng-controller="CityController">
            <div ng-view></div>
        </div>


        <script src="resources/js/app.js"></script>

        <script src="resources/js/CityController.js"></script>

</body>
</html>

app.js

var app = angular.module("mainApp", [ 'ngRoute' ]);

app.config([ '$routeProvider', function($routeProvider) {

    $routeProvider.

    when('/cities/paris', {
        templateUrl : 'resources/paris.html',
        controller : 'CityController'
    }).


    otherwise({
        redirectTo : ''

    });


} ]);

CityController.js

app.controller('CityController', function($scope, $http) {

    $scope.getCity = function() {

        $http.get('city')
        .success(function(response) {
            $scope.name = response.name;
            $scope.country = response.country;
        }).error(function() {
            //Output error to console 
        });

    };

     //$scope.getCity();

});

Я не хочу называть getCity здесь, потому что это означает, что HTTP-запрос на получение "городской" конечной точки вызывается при загрузке index.html

paris.html

This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>

John Steed 22 апр. 2016, в 20:13

Источник

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

Bhabishya Kumar · Answer 1 · 2016-04-22T16-54-00.000Z

Я думаю, что вы ищете вариант resolve маршрутизатора.

Решение содержит одно или несколько обещаний, которые должны успешно разрешиться до изменения маршрута. Это означает, что вы можете дождаться появления данных перед показом представления и упростить инициализацию модели внутри контроллера, поскольку исходные данные передаются контроллеру вместо контроллера, который должен выйти и извлечь данные.

Проверьте объяснения и использование здесь.

urvashi · Answer 2 · 2016-04-22T14-53-00.000Z

Вы можете вызвать getCity() из paris.html, используя ng-init = getCity(), ng-init вызовет вашу функцию, как только paris.html будет загружен в ваш ng-view. Напр.

This is Paris.
<br><br><br>
 <div ng-init=getCity() >
  Name: {{name}}<br>
  Country: {{country}}
 </div>
<br><br><br>