Я изучаю angularjs, и есть один аспект этого, который я пытаюсь понять.Angularjs: Как вызвать функцию контроллера после маршрутизации
Мой желанный/ожидается поведение ниже код:
- Пользователь нажимает на ссылку Paris (якорный тег)
- routeProvider перехватывает запрос, загружает страницу paris.html в нг-зрения ,
- Функция 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 GET запрос к конечной точке 'город' вызывается, когда index.html загружается
paris.html
This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>