4 Möglichkeiten, zwischen Angular-Seiten und Übergabewerten zu wechseln

Das Beispiel in diesem Artikel beschreibt die Methode zum Wechseln zwischen Angular JS-Seiten und zum Übergeben von Werten als Referenz. Der spezifische Inhalt ist wie folgt: Wechseln und Übergeben von Werten zwischen Angular JS-Seiten

1 . Seitensprung basierend auf UI-Router-Übertragungsparametern
(1) Verwenden Sie UI-Router, um Routen in AngularJS's app.js zu definieren. Eine Seite (producers.html) platziert mehrere Produzenten auf eines der Ziele und die Seite springt zur entsprechenden Produzentenseite und übergibt den ProducerId-Parameter.

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

(2) Definieren Sie in der Datei „produzenten.html“ das Klickereignis, z. B. ng-click="toProducer(producerId)", Definieren Sie in ProducersCtrl die Seitensprungfunktion (mithilfe der $state.go-Schnittstelle des UI-Routers):

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

(3) Rufen Sie in ProducerCtrl den Parameter ProducerId über $stateParams von ui-router ab, zum Beispiel:

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

2. Fabrikbasierter Seitensprungparameter

Beispiel: Sie haben N Seiten, jede Seite erfordert, dass der Benutzer Informationen eingibt, und leitet den Benutzer letztendlich zur letzten Seite zur Übermittlung. Gleichzeitig sollte die letztere Seite die Informationen anzeigen von allen vorherigen Seiten ausgefüllt. Zu diesem Zeitpunkt ist es eine vernünftigere Wahl, Factory zum Übergeben von Parametern zu verwenden (der folgende Code ist eine vereinfachte Version, die je nach Bedarf angepasst werden kann):

.factory('myFactory', function () {
 //定义factory返回对象
 var myServices = {};
 //定义参数对象
 var myObject = {};
  
 /**
  * 定义传递数据的set函数
  * @param {type} xxx
  * @returns {*}
  * @private
  */
 var _set = function (data) {
  myObject = data; 
 };
 
 /**
  * 定义获取数据的get函数
  * @param {type} xxx
  * @returns {*}
  * @private
  */
 var _get = function () {
  return myObject;
 };
 
 // Public APIs
 myServices.set = _set;
 myServices.get = _get;
  
 // 在controller中通过调set()和get()方法可实现提交或获取参数的功能
 return myServices;
  
});

3. Parameterübergabe basierend auf Factory und $rootScope.$broadcast()

(1) Beispiel: Verschachtelte Ansichten sind auf einer einzelnen Seite definiert, und Sie möchten alle Unterbereiche überwachen Änderungen in einem bestimmten Parameter und ergreifen entsprechende Maßnahmen. In einer Kartenanwendung wird beispielsweise das Eingabeelement in einem $state definiert. Nach Eingabe der Adresse muss die Karte gleichzeitig in einem anderen Bundesstaat positioniert werden, um Informationen über die Geschäfte in der Umgebung des Standorts anzuzeigen . Derzeit überwachen mehrere $scopes Adressänderungen.
PS: $rootScope.$broadcast() kann sehr praktisch sein, um globale Ereignisse festzulegen und alle untergeordneten Bereiche darauf hören zu lassen.

.factory('addressFactory', ['$rootScope', function ($rootScope) {
 // 定义所要返回的地址对象
 var address = {};
  
 // 定义components数组，数组包括街道，城市，国家等
 address.components = [];
 
 // 定义更新地址函数，通过$rootScope.$broadcast()设置全局事件'AddressUpdated'
 // 所有子作用域都能监听到该事件
 address.updateAddress = function (value) {
 this.components = value.slice();
 $rootScope.$broadcast('AddressUpdated');
 };
  
 // 返回地址对象
 return address;
}]);

(2) Im Controller, der die Adresse erhält:

// 动态获取地址，接口方法省略
var component = {
 addressLongName: xxxx,
 addressShortName: xxxx,
 cityLongName: xxxx,
 cityShortName: xxxx  
};
 
// 定义地址数组
$scope.components = [];
 
$scope.$watch('components', function () {
 // 将component对象推入$scope.components数组
 components.push(component);
 // 更新addressFactory中的components
 addressFactory.updateAddress(components);
});

(3) Im Controller, der Adressänderungen überwacht:

// 通过addressFactory中定义的全局事件'AddressUpdated'监听地址变化
$scope.$on('AddressUpdated', function () {
 // 监听地址变化并获取相应数据
 var street = address.components[0].addressLongName;
 var city = address.components[0].cityLongName;
 
 // 通过获取的地址数据可以做相关操作，譬如获取该地址周边的商铺，下面代码为本人虚构
 shopFactory.getShops(street, city).then(function (data) {
  if(data.status === 200){
   $scope.shops = data.shops;
  }else{
   $log.error('对不起，获取该位置周边商铺数据出错: ', data);
  }
 });
});

4 Basierend auf localStorage oder sessionStorage Seitensprung-Parameterübertragung

Hinweis: Achten Sie beim Übertragen von Parametern über LS oder SS darauf, die Variablen zu überwachen. Andernfalls wird das Ende, das die Variablen erhält, nicht aktualisiert, wenn sich die Parameter ändern. AngularJS verfügt über einige vorgefertigte WebStorage-Abhängigkeiten, die verwendet werden können, z. B. gsklee/ngStorage · GitHub, grevory/angular-local-storage · GitHub. Im Folgenden wird ngStorage verwendet, um den Prozess der Parameterübergabe kurz zu beschreiben:

(1) Parameter in localStorage hochladen – Controller A

// 定义并初始化localStorage中的counter属性
$scope.$storage = $localStorage.$default({
 counter: 0
});
 
// 假设某个factory（此例暂且命名为counterFactory）中的updateCounter()方法
// 可以用于更新参数counter
counterFactory.updateCounter().then(function (data) {
 // 将新的counter值上传到localStorage中
 $scope.$storage.counter = data.counter;
});

(2) Überwachen Sie Parameteränderungen in localStorage – Controller B

$scope.counter = $localStorage.counter;
$scope.$watch('counter', function(newVal, oldVal) {
 // 监听变化，并获取参数的最新值
 $log.log('newVal: ', newVal);
});

Das Obige ist der Inhalt der 4 Methoden zum Umschalten zwischen Angular-Seiten und der Übergabe von Werten, mehr Verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!