AngularJS 中ui-view傳參的實(shí)例詳解

更新時(shí)間：2017年08月25日 15:28:10 投稿：lqh

這篇文章主要介紹了AngularJS 中ui-view傳參的實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下

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傳參數(shù)</div> 
 <a ui-sref="param({index:'123'})">傳參數(shù)</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){ 
//接收參數(shù) 
  alert($stateParams.index); 
}); 
</script> 
</html>

跳轉(zhuǎn)頁

<div ng-controller="view1_controller"></div> 


 接收參數(shù) 
 </body>

運(yùn)行

點(diǎn)擊跳轉(zhuǎn)就可以看到alert的參數(shù)。

以上就是AngularJS ui-view傳參的實(shí)例詳解，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

angular 用攔截器統(tǒng)一處理http請求和響應(yīng)的方法
下面小編就為大家?guī)硪黄猘ngular 用攔截器統(tǒng)一處理http請求和響應(yīng)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解
這篇文章主要介紹了AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-04-04
基于datepicker定義自己的angular時(shí)間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時(shí)間組件,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
對angularJs中controller控制器scope父子集作用域的實(shí)例講解
今天小編就為大家分享一篇對angularJs中controller控制器scope父子集作用域的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
AngularJs 彈出模態(tài)框（model）
這篇文章主要介紹了AngularJs 彈出模態(tài)框（model）的相關(guān)資料,需要的朋友可以參考下
2016-04-04
Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報(bào)功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報(bào)功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
angularJs使用ng-repeat遍歷后選中某一個(gè)的方法
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個(gè)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Angular使用過濾器uppercase/lowercase實(shí)現(xiàn)字母大小寫轉(zhuǎn)換功能示例
這篇文章主要介紹了Angular使用過濾器uppercase/lowercase實(shí)現(xiàn)字母大小寫轉(zhuǎn)換功能,涉及AngularJS過濾器針對字符串轉(zhuǎn)換的簡單使用技巧,需要的朋友可以參考下
2018-03-03
angular.foreach 循環(huán)方法使用指南
本文主要介紹了angular.foreach 循環(huán)方法使用格式及參數(shù)，是篇非?；A(chǔ)的文章，與需要的小伙伴參考下
2015-01-01