AngularJS中页面传参方法

发布时间：2020-12-17 10:39:28 所属栏目：安全来源：网络整理

导读：1、基于ui-router的页面跳转传参 (1) 用ui-router定义路由，比如有两个页面，一个页面(producers.html)放置了多个producers，点击其中一个目标，页面跳转到对应的producer页面，同时将producerId这个参数传过去。 .state('producers' url: '/producers'span

1、基于ui-router的页面跳转传参

(1) 用ui-router定义路由，比如有两个页面，一个页面(producers.html)放置了多个producers，点击其中一个目标，页面跳转到对应的producer页面，同时将producerId这个参数传过去。

.state('producers'　　url: '/producers',　　templateUrl: 'views/producers.html',　　controller: 'ProducersCtrl'

})

.state('producers',{

url: '/producer/:producerId',　　templateUrl: 'views/producer.html',　　controller: 'ProducerCtrl'

})

(2)在producer.html中，定义点击事件，比如ng-click="toProducer(producerId)",在ProducersCtrl中，定义页面跳转函数（使用ui-router的$state.go接口）：

.controller('ProducersCtrl',= 'producer'

(3)在ProducerCtrl中，通过ui-router的$stateParams获取参数producerId,

.controller('ProducerCtrl',　　var producerId = $stateParams.producerId;

});

2、基于factory的页面跳转传参

举例：有N个页面，每个页面都需要用户填选信息，最终引导用户至尾页提交，同时后一个页面要显示前面所有页面填写的信息。这时用factory传参是比较合理的选择

.factory('myFactory', myObject = _setter = myObject = _getter = });

3、基于factory和$rootScope.$broadcast()的传参

(1)举例：

.factory('addressFactory',['$rootScope', address =

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 定义components数组，数组包括街道，城市，国家等</span>
address.components =<span style="color: #000000"&gt; [];

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 定义更新地址函数，通过$rootScope.$broadcast()设置全局事件'AddressUpdated'</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 所有子作用域都能监听到该事件</span>
address.updateAddress = <span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; (value) {
</span><span style="color: #0000ff"&gt;this</span>.components =<span style="color: #000000"&gt; angular.copy(value);
$rootScope.$broadcast(</span>'AddressUpdated'<span style="color: #000000"&gt;);
};

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 返回地址对象</span>
<span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; address;

}]);

(2)在获取地址的controller中：

component =// 定义地址数组
$scope.components = [];

$scope.$watch('components',function () {
// 将component对象推入$scope.components数组
 components.push(component);
// 更新addressFactory中的components
 addressFactory.updateAddress(components);
});

(3)在监听地址变化的controller中：

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

4. 基于localStorage或sessionStorage的页面跳转传参

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

(2)监听localStorage中的参数变化 - Controller B

$scope.counter ='counter', $log.log('newVal: '

5. 基于localStorage/sessionStorage和Factory的页面传参

( 'use strict' .module('myApp' .factory('authService' apiUserPermission = ENV.baseUrl + 'user/permission' authServices = $log.error('XHR Failed for ' + name + '.n',angular.toJson(error, apiLoginUrl = ENV.baseUrl + 'user/login' method: 'POST' . (response.status === 200 && _.includes(response.data.authorities,'admin' $localStorage.authtoken = setAuthenticationParams( } $localStorage.authtoken = '' setAuthenticationParams( handleError('login()' $localStorage.isAuth = authParams = deferred = $http.get(apiUserPermission).success( (_.includes(response.authorities,'admin' deferred.resolve( } deferred.reject( }).error( handleError('checkAuthentication()' deferred.reject( })();

（2）定义名为index.run.js的文件，用于在应用载入时自动运行权限检测代码。

( 'use strict' .module('myApp' .definePermission('ADMIN', authParams = } })();

（3）定义名为authInterceptor.service.js的文件，用于在所有该应用请求的HTTP requests的header中注入token。关于AngularJS的Interceptor，请参看。

( 'use strict' .module('myApp' .factory('authInterceptorService' authService = $injector.get('authService' authInterceptorServices = authParams = config.headers = config.headers || (authParams.authtoken) config.headers.authtoken = config || (rejection.status === 401 $location.path('/login' })();

转自知乎：https://www.zhihu.com/question/33565135

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!