0

Работаю в AngularJS недавно. Помогите разобраться. Суть такова: При клике на элемент на одной странице,надо чтобы он записывался в ng-Model на другой странице. Но вся загвоздка в том, что элемент по которому нужно кликнуть это объект country{ph : "+7", na : "Russia"}, и данные нужно распихать в разные инпуты. Вот код: Страница с списком объектов(firstPage):

<div>
  <div ng-click="setCurrent(country)" ng-repeat="country in countries">
  <a href="/secondPage"><div><span id="na">{{country.na}}</span><span id="ph">{{country.ph}}</span></div></a>
</div>

Контроллер к firstPage:

app.controller('countryCtrl', function($rootScope, $scope, $http){
   $http.get('js/common/countries.json').success(function(data){
       $scope.countries = data;
   });
});

Вторая страница(secondPage), куда нужно записать данные:

<form name="phoneForm">
    <div>
        <input type="text" ng-model="country.na" disabled>
        <input type="text" ng-model="country.ph" disabled>
    </div>
</form>

У этой страницы контроллер пустой.

Это код с настройками роутов:

var app = angular.module('myApp', ['ngRoute'])
   .config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true); 
$routeProvider.when('/firstPage', {templateUrl: '/templates/firstPage.html', controller: 'firstPageCtrl'})
$routeProvider.when('/secondPage', {templateUrl:'/templates/secondPage.html', controller: 'secondPageCtrl'})
});

Подскажите каким методом можно все это сделать (.service .factory. еще как-то). Я сделал это через rootScope но это не то что мне нужно.

Буду очень благодарен если кто-то напишет пример кода, потому что я уже 2-й день ломаю себе этим голову. Заранее спасибо.

5
  • какой роутинг используется? или /secondPage это физически другая страница?
    – Grundy
    13 июл 2016 в 12:30
  • @Grundy использую модуль ngRoute.
    – Artem
    13 июл 2016 в 13:02
  • тогда добавляй код с настройкам роутов, и разметку куда все выводится
    – Grundy
    13 июл 2016 в 13:07
  • 1
    Вполне себе сервис напрашивается - один контроллер сохранит туда информацию, другой прочитает. 13 июл 2016 в 13:29
  • @Grundy добавил код с настройками роутов в вопрос...! Вывести эти данные надо в ng-model которые находятся на secondPage.
    – Artem
    13 июл 2016 в 22:20

2 ответа 2

1

Можно попробовать параметры $routeParams тогда ссылка в firstPage будет выглядеть так

<a href="/secondPage&na={{country.na}}">

secondPage

<div ng-controller="secondPageCtrl">
    <input type="text" ng-model="country.na" disabled>
    <input type="text" ng-model="country.ph" disabled>
</div>

secondPageCtrl

app.controller('secondPageCtrl',function($scope, $routeParams, countryService){
    $scope.country = {};
    $scope.$on("$routeChangeSuccess", function () {
       var na = $routeParams["na"]
       if(na!=='undefined'){
           //в сервисе реализуем функцию получения объекта по na
           // и устанавливаем его в $scope.country
           countryService.getCountry(na).then(function(response){
                $scope.country = response.data;
           });
       }
    });
});
2
  • Если не нравиться решение, не минусуй, скажи как я могу его улучшить. 15 июл 2016 в 13:13
  • Опубликовал свой вариант ответа.
    – Artem
    21 июл 2016 в 14:49
0

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

function firstPageCtrl($rootScope, $scope, $http, currentCountry){
    var vm = this;

    $http.get('js/common/countries.json').success(function(data){
       $scope.countries = data;
    });

    $scope.setCurrent = function(country){
        currentCountry.selectedCountry(country);
    }
}

Контроллер secondPage выглядит так:

function secondPageCtrl($rootScope, $scope, $http, currentCountry){

    var vm = this;
    var selected = currentCountry.viewedCountry();
    vm.country = selected;

}

И сервис выглядит так:

function currentCountry(){
    var newcountry = '';
    return {
        selectedCountry: function(country){
            newcountry = country;
        },
        viewedCountry: function(){
            return newcountry;
        }
    }
}
1
  • Думал о таком решении, но не стал предлагать, потому, что это решение похоже на обмен данными через RootScope, которое вас не устраивало 21 июл 2016 в 14:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.