AngularJS 中ui-view传参的实例详解
- 作者: 老中医砖治吹牛逼
- 来源: 51数据库
- 2021-09-01
angular路由传参
首页
<!doctype html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" rel="external nofollow" type="text/css"></link> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" rel="external nofollow" >柳絮飞祭奠</a> </div> </div> </nav> </div> <div ng-click="go()" ng-controller="state_go_controller"> $state.go传参数</div> <a ui-sref="param({index:'123'})">传参数</a> <div ui-view></div> </body> <script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script> <script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script> <script type="text/javascript"> var app=angular.module("app",['ui.router']); app.config(['$stateprovider','$urlrouterprovider',function($stateprovider,$urlrouterprovider){ $stateprovider.state('index1', { url : '/index1', templateurl : '/angular/uiview/param/index1.html' }).state('param',{ url:'/param/:index', templateurl: '/angular/uiview/param/param.html' }); $urlrouterprovider.otherwise('/index1'); }]).config(function($sceprovider){ $sceprovider.enabled(false); }); app.controller("state_go_controller", function($state, $scope) { $scope.go = function() { $state.go('param', { index : 42 }); }; }); app.controller("view1_controller",function($stateparams){ //接收参数 alert($stateparams.index); }); </script> </html>
跳转页
<div ng-controller="view1_controller"></div> 接收参数 </body>
运行
点击跳转就可以看到alert的参数。
以上就是angularjs ui-view传参的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
推荐阅读
热点文章
Angular中响应式表单的三种更新值方法详析
7
Angularjs实现下拉框联动的示例代码
7
详解AngularJS跨页面传值(ui-router)
2
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
3
angular2路由切换改变页面title的示例代码
4
Angular2 组件间通过@Input @Output通讯示例
5
Angularjs中ng-repeat的简单实例
3
AngularJS 中ui-view传参的实例详解
4
浅谈Angular路由守卫
4
详解基于Angular4+ server render(服务端渲染)开发教程
4