AngularJS 中ui-view傳參的實(shí)例詳解
Angular路由傳參
首頁(yè)
<!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)頁(yè)
<div ng-controller="view1_controller"></div> 接收參數(shù) </body>
運(yùn)行
點(diǎn)擊跳轉(zhuǎn)就可以看到alert的參數(shù)。
以上就是AngularJS ui-view傳參的實(shí)例詳解,如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向,實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面,這個(gè)功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會(huì)用到,下面小編給大家?guī)砹私鉀Q方法一起看看吧2018-05-05
使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求詳析
這篇文章主要給大家介紹了關(guān)于如何使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用RxJS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Angularjs渲染的 using 指令的星級(jí)評(píng)分系統(tǒng)示例
本篇文章主要介紹了Angularjs渲染的 using 指令的星級(jí)評(píng)分系統(tǒng)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
AngularJs Understanding Angular Templates
本文主要介紹AngularJs Understanding Angular Templates的資料,這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼,有興趣的小伙伴的參考下2016-09-09
angular項(xiàng)目中bootstrap-datetimepicker時(shí)間插件的使用示例
這篇文章主要介紹了angular項(xiàng)目中bootstrap-datetimepicker時(shí)間插件的使用示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Angular企業(yè)級(jí)開發(fā)——MVC之控制器詳解
本篇文章主要介紹了Angular企業(yè)級(jí)開發(fā)——MVC之控制器詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
Angularjs material 實(shí)現(xiàn)搜索框功能
這篇文章主要介紹了Angularjs material 實(shí)現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下2016-03-03

