AngularJS 中ui-view传参的实例详解
2017-08-25 15:28
585 查看
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" href="../../plugins/bootstrap/css/bootstrap.min.css" 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" href="#" 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传参的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
相关文章推荐
- Android 中ViewPager重排序与更新实例详解
- Android WebView线性进度条实例详解
- AngularJS 自定义过滤器详解及实例代码
- 基于 SurfaceView 详解 android 幸运大转盘,附带实例app
- AngularJs表单验证实例详解
- UITableView 实例详解 滑动编辑 headerView
- AngularJS 过滤与排序详解及实例代码
- 详解angularjs的数组传参方式的简单实现
- android界面开发:ViewPager的详解,并用于仿微博滑动实例和图片滚动实例
- 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
- UICollectionView详解+实例
- AngularJS表单提交实例详解
- Android自定义View中attrs.xml的实例详解
- Android Webview添加网页加载进度条实例详解
- AngularJS中的拦截器实例详解
- UITableView 实例详解 滑动编辑 headerView
- 《AngularJS》5个实例详解Directive(指令)机制
- Android CardView详解及使用方法和实例
- AngularJS学习笔记之表单验证功能实例详解
- spring mvc DispatcherServlet详解之三---request通过ModelAndView中获取View实例的过程