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 you have read our privacy policy.

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