当前位置: 首页 > 编程笔记 >

AngularJS 中ui-view传参的实例详解

国跃
2023-03-14
本文向大家介绍AngularJS 中ui-view传参的实例详解,包括了AngularJS 中ui-view传参的实例详解的使用技巧和注意事项,需要的朋友参考一下

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传参的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

 类似资料:
  • 本文向大家介绍Angularjs上传图片实例详解,包括了Angularjs上传图片实例详解的使用技巧和注意事项,需要的朋友参考一下 •上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: •在相应的html中引入文件路径:<script src="lib

  • 本文向大家介绍AngulaJS路由 ui-router 传参实例,包括了AngulaJS路由 ui-router 传参实例的使用技巧和注意事项,需要的朋友参考一下 在这里分享我做的一个使用ui-router 传参的小demo 1.首先第一步设置入口文件index.html,注意加载的顺序,先加载包,再加载自己写的控制器。 2.app.js文件,依赖注入,设置路由,此处的路由是使用ui-router

  • 本文向大家介绍AngularJS中的拦截器实例详解,包括了AngularJS中的拦截器实例详解的使用技巧和注意事项,需要的朋友参考一下 AngularJS中的拦截器实例详解 异步操作 有时候需要在拦截器中做一些异步操作。幸运的是, AngularJS 允许我们返回一个 promise 延后处理。它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应。 下面是项目中用到的代码。 感谢阅读,希望能

  • 本文向大家介绍AngularJS中filter的使用实例详解,包括了AngularJS中filter的使用实例详解的使用技巧和注意事项,需要的朋友参考一下 AngularJS中filter的使用实例详解 一、格式化数字为货币格式。 script: 显示为    二、lowercase 格式化字符串为小写。 显示为 三、uppercase 格式化字符串为大写。 显示为 四、filter 从数组项中选

  • 本文向大家介绍Android源码中常用的接口传参实例详解,包括了Android源码中常用的接口传参实例详解的使用技巧和注意事项,需要的朋友参考一下 Android源码中常用的接口传参实例详解 把MyCclass中的参数传到MyDclass 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍AngularJS入门教程中SQL实例详解,包括了AngularJS入门教程中SQL实例详解的使用技巧和注意事项,需要的朋友参考一下 AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据。 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 运行结果: Alfreds Futterkiste Germany Ana Trujillo Empare