Загрузка нг-просмотра HTML-шаблонов - PullRequest
Новая
       34

Загрузка нг-просмотра HTML-шаблонов

0 голосов
/ 12 октября 2018

У меня есть одна страница index.html, и я использую ng-view.Два HTML-шаблона: page1 и page2.

У меня есть кнопка, к которой я прикрепил функцию ng-click.Когда функция запускается, я выбираю данные о погоде, используя $resource, а также использую URL-адрес погоды внутри amcharts dataloader, чтобы построить график из информации о погоде.

Теперь, если я не отделюшаблоны и держите все на одной странице, все отлично работает.Но когда я разделяю их и беру данные со страницы index.html, ничего не получается.Я думаю, потому что, когда загружены page1 и page2, информация, извлекаемая функцией, теряется.

Есть ли элегантный способ сделать это?В идеале я хочу, чтобы мой index.html принимал данные от пользователя.Например, «введите город», и я хочу, чтобы при загрузке /page1 должны были быть данные о погоде и на page2, диаграмме погоды, без повторного запроса ввода от пользователя.

Прямо сейчас яЯ принимаю ввод в page1, но в идеале я бы хотел, чтобы он был в основном index.html.

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

Я все еще новичок в angularjs.Поэтому, пожалуйста :)

JavaScript 

$app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'page1.html',
            controller: 'weatherController'
        })
        .when('/graph', {
            templateUrl: 'page2.html',
            controller: 'weatherController'
        })
        .otherwise({
            redirectTo: '/'
        })
});

app.controller('weatherController', ['$scope', '$resource', '$routeParams', function($scope, $resource, $routeParams) {
    $scope.GetWeatherInfo = function() {
        // getting weather data for page1.html
        // getting chart data for page2.html
        ...
    }
}]);

HTML (Page1.html) 

<div ng-controller="weatherController">

<input type="text" name="city" id="city" class="form-control" placeholder="Stadt" ng-model="city_name" /> 
<button id="submitWeather" class="btn btn-primary" ng-click="GetWeatherInfo()"> zum Wetter </button>

Temperature:        Min: {{w.main.temp_min}} 
                    Max: {{w.main.temp_max}}

HTML (Page2.html) 

<div ng-controller="weatherController">
<div id="chartdiv"></div>
...