Передача данных с одной страницы на другую в angular js

Как передать данные с одной страницы на другую в angular js?
Я слышал об использовании чего-то в качестве услуг, но я не уверен, как это использовать!
Ниже приведен функционал, который я хочу выполнить!
На странице 1: 



<div class="container" ng-controller="mycontrl">

  <label for="singleSelect"> Select Date </label><br>

  <select nAMe="singleSelect" ng-model="dateSelect">

    <option value="2/01/2015">2nd Jan</option>

    <option value="3/01/2015">3rd Jan</option>  

  </select>

  <br>

  Selected date = {{dateSelect}}

  <br/><br/><br/>

  <label for="singleSelect"> Select time </label><br>

  <select nAMe="singleSelect" ng-model="timeSelect">

    <option value="9/10">9AM-10AM</option>

    <option value="10/11">10AM-11AM</option>

    <option value="11/12">11AM-12PM</option>

    <option value="12/13">12PM-1PM</option>

    <option value="13/14">1PM-2PM</option>

  </select>

  <button ng-click="check()">Check!</button>

  <br>

  Selected Time = {{timeSelect}}

  <br/><br/>


Пользователь выбирает время и дату, которые используются для вызова базы данных, а результаты сохраняются в массиве переменных!
Страница 1 контроллер: 



var config= {

  params: { 

    time: times,

    date:dates

  }

};



$http.get('/era',config).success(function(response) {

  console.log("I got the data I requested");

  $scope.therapist_list = response;

});


Теперь, как я могу отправить эту переменную $scope.therapist_list, которая является массивом на следующую страницу, которая будет иметь другой контроллер, а также если службы-это использование, как определить его в моем приложении.JS файл



Применение.js: 



var firstpage=angular.module('firstpage', []);

var secondpage=angular.module('secondpage', []);
695   2  

2 ответов:

Для сохранения данных, которые вы хотите передать другому $scope или сохранить во время маршрутизации, вы можете использовать сервисы (Service). Поскольку service является singleton, Вы можете использовать его для хранения и обмена данными.

Посмотрите на примерjsfiddle .

var myApp = angular.module("myApp", []);


myApp.controller("ExampleOneController", function($scope, NewsService) {
  $scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope,NewsService) {
  $scope.news = NewsService.news;
});

myApp.service("NewsService", function() {
  return {
    news: [{theme:"This is one new"}, {theme:"This is two new"}, {theme:"This is three new"}]
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="ExampleOneController">
    <h2>
  ExampleOneController
  </h2>
    <div ng-repeat="n in news">
      <textarea ng-model="n.theme"></textarea>
    </div>
  </div>
  <div ng-controller="ExampleTwoController">
    <h2>
  ExampleTwoController
  </h2>
  <div ng-repeat="n in news">
      <div>{{n.theme}}</div>
    </div>
  </div>
</body>

Обновлено

Показывает использование переменной в другом контроллере jsfiddle.

var myApp = angular.module("myApp", []);


myApp.controller("ExampleOneController", function($scope, NewsService) {
  $scope.newVar = {
    val: ""
  };
  NewsService.newVar = $scope.newVar;
  $scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope, NewsService) {
  $scope.anotherVar = NewsService.newVar;
  $scope.news = NewsService.news;
});

myApp.service("NewsService", function() {
  return {
    news: [{
      theme: "This is one new"
    }, {
      theme: "This is two new"
    }, {
      theme: "This is three new"
    }]
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="ExampleOneController">
    <h2>
  ExampleOneController
  </h2>
    <div ng-repeat="n in news">
      <textarea ng-model="n.theme"></textarea>
    </div>
    <input ng-model="newVar.val">
  </div>
  <div ng-controller="ExampleTwoController">
    <h2>
  ExampleTwoController
  </h2>
    <div ng-repeat="n in news">
      <div>{{n.theme}}</div>
    </div>
    <pre>newVar from ExampleOneController {{anotherVar.val}}</pre>
  </div>
</body>
6  
2016-02-15 12:40:17

ОК, вы пишете другой модуль E с фабричной службой, например

angular
    .module('dataApp')
    .factory('dataService', factory);

factory.$inject = ['$http', '$rootScope', '$q', '$log'];

function factory($http, $rootScope,$q,$log) {
    var service = {
        list: getList
    };
    service.therapist_list = null;
    return service;


    function getList() {
        var config= {
            params: { 
                time: times,
                date:dates
            }
        };

        $http.get('/era',config).success(function(response) {
        console.log("I got the data I requested");
        $scope.therapist_list = response;

        });

        $log.debug("get Students service");
        $http.get('/era',config).then(function successCallback(response) {
            service.therapist_list = response.data;
            $log.debug(response.data);
        }, function errorCallback(response) {
            $log.debug("error" + response);
        });
    }
}

Добавьте этот модуль в качестве зависимостей к вашим приложениям на обеих страницах, например

var firstpage=angular.module('firstpage', [dataApp]);
var secondpage=angular.module('secondpage', [dataApp]);

А затем в вашем контроллере потребляйте эту услугу 

.controller('homeController', ['$scope', 'dataService', function ($scope, dataService) {
}]);
0  
2016-02-15 11:19:50

Comments

    Ничего не найдено.
Click here to cancel reply.