The example in this article shares the method of switching and transferring values ??between Angular JS pages for your reference. The specific content is as follows Switching and transferring values ??between Angular JS pages

1. Page jump and parameter passing based on ui-router
(1 ) Use ui-router to define routing in AngularJS's app.js. For example, there are two pages now. One page (producers.html) places multiple producers. Click one of the targets and the page will jump to the corresponding producer page. At the same time Pass the producerId parameter.

state('producers', {
 url: '/producers',
 templateUrl: 'views/producers.html',
 controller: 'ProducersCtrl'
})
.state('producer', {
 url: '/producer/:producerId',
 templateUrl: 'views/producer.html',
 controller: 'ProducerCtrl'
})

(2) In producers.html, define the click event, such as ng-click="toProducer(producerId)", in ProducersCtrl, define the page jump function (use the $state of ui-router .go interface):

.controller('ProducersCtrl', function ($scope, $state) {
 $scope.toProducer = function (producerId) {
  $state.go('producer', {producerId: producerId});
 };
});

(3) In ProducerCtrl, get the parameter producerId through $stateParams of ui-router, for example:

.controller('ProducerCtrl', function ($scope, $state, $stateParams) {
 var producerId = $stateParams.producerId;
});

2. Factory-based page jump transfer See

for example: you have N pages, each page requires the user to fill in information, and finally guides the user to the last page to submit. At the same time, the latter page should display the information filled in from all previous pages. At this time, it is a more reasonable choice to use factory to pass parameters (the code below is a simplified version and can be customized according to needs):

.factory('myFactory', function () {
 //定義factory返回對象
 var myServices = {};
 //定義參數(shù)對象
 var myObject = {};
  
 /**
  * 定義傳遞數(shù)據(jù)的set函數(shù)
  * @param {type} xxx
  * @returns {*}
  * @private
  */
 var _set = function (data) {
  myObject = data; 
 };
 
 /**
  * 定義獲取數(shù)據(jù)的get函數(shù)
  * @param {type} xxx
  * @returns {*}
  * @private
  */
 var _get = function () {
  return myObject;
 };
 
 // Public APIs
 myServices.set = _set;
 myServices.get = _get;
  
 // 在controller中通過調(diào)set()和get()方法可實現(xiàn)提交或獲取參數(shù)的功能
 return myServices;
  
});

3. Passing parameters based on factory and $rootScope.$broadcast()

(1) Example: Nested views are defined in a single page, and you want all subscopes to monitor changes in a certain parameter and take corresponding actions. For example, in a map application, the input element is defined in a $state. After entering the address, the map needs to be positioned. At the same time, the list in another state needs to display information about the shops surrounding the location. At this time, multiple $scopes are monitoring address changes. .
PS: $rootScope.$broadcast() can be very convenient to set global events and let all child scopes listen to them.

.factory('addressFactory', ['$rootScope', function ($rootScope) {
 // 定義所要返回的地址對象
 var address = {};
  
 // 定義components數(shù)組，數(shù)組包括街道，城市，國家等
 address.components = [];
 
 // 定義更新地址函數(shù)，通過$rootScope.$broadcast()設(shè)置全局事件'AddressUpdated'
 // 所有子作用域都能監(jiān)聽到該事件
 address.updateAddress = function (value) {
 this.components = value.slice();
 $rootScope.$broadcast('AddressUpdated');
 };
  
 // 返回地址對象
 return address;
}]);

(2) In the controller that gets the address:

// 動態(tài)獲取地址，接口方法省略
var component = {
 addressLongName: xxxx,
 addressShortName: xxxx,
 cityLongName: xxxx,
 cityShortName: xxxx  
};
 
// 定義地址數(shù)組
$scope.components = [];
 
$scope.$watch('components', function () {
 // 將component對象推入$scope.components數(shù)組
 components.push(component);
 // 更新addressFactory中的components
 addressFactory.updateAddress(components);
});

(3) In the controller that monitors the address change:

// 通過addressFactory中定義的全局事件'AddressUpdated'監(jiān)聽地址變化
$scope.$on('AddressUpdated', function () {
 // 監(jiān)聽地址變化并獲取相應(yīng)數(shù)據(jù)
 var street = address.components[0].addressLongName;
 var city = address.components[0].cityLongName;
 
 // 通過獲取的地址數(shù)據(jù)可以做相關(guān)操作，譬如獲取該地址周邊的商鋪，下面代碼為本人虛構(gòu)
 shopFactory.getShops(street, city).then(function (data) {
  if(data.status === 200){
   $scope.shops = data.shops;
  }else{
   $log.error('對不起，獲取該位置周邊商鋪數(shù)據(jù)出錯: ', data);
  }
 });
});

4. Based on localStorage or SessionStorage's page jump to transfer parameters

Note: When transferring parameters through LS or SS, you must monitor the variables, otherwise when the parameters change, the end that obtains the variables will not be updated. AngularJS has some ready-made WebStorage dependencies that can be used, such as gsklee/ngStorage · GitHub, grevory/angular-local-storage · GitHub. The following uses ngStorage to briefly describe the parameter transfer process:

(1) Upload parameters to localStorage - Controller A

// 定義并初始化localStorage中的counter屬性
$scope.$storage = $localStorage.$default({
 counter: 0
});
 
// 假設(shè)某個factory（此例暫且命名為counterFactory）中的updateCounter()方法
// 可以用于更新參數(shù)counter
counterFactory.updateCounter().then(function (data) {
 // 將新的counter值上傳到localStorage中
 $scope.$storage.counter = data.counter;
});

(2) Monitor parameter changes in localStorage - Controller B

$scope.counter = $localStorage.counter;
$scope.$watch('counter', function(newVal, oldVal) {
 // 監(jiān)聽變化，并獲取參數(shù)的最新值
 $log.log('newVal: ', newVal);
});

That’s it Contents on the four methods of switching between Angular pages and passing values. For more related content, please pay attention to the PHP Chinese website (www.miracleart.cn)!