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