温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

AngularJS中ui-view传参的示例分析

发布时间:2021-07-15 13:59:14 来源:亿速云 阅读:149 作者:小新 栏目:web开发

这篇文章主要介绍了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传参的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI