angular——页面跳转
页面跳转
- 跳到某页面 (不带参数, 单纯跳转)
ng-click="action.toPage('tab.home-recommend-topic-detail')"
<!-------------------- 话题精选 -----------------------> <section class="white_bg topics "> <header class="fix_container "> <div class="fix_top_left" id="topics_mark"><i class="icon-topic"></i></div> <ul id="topic_title" > <li ng-repeat="topic in data.topics" class="font_16_14 black_title one_line_text" ng-click="action.toPage('tab.home-recommend-topic-detail')"> #{{topic}}# </li> </ul> <button class="btn blue_text_btn fix_top_right" ng-click="">更多</button> </header> </section>
控制器的代码:
angular.module('MrTrustApp.controllers') .controller('HomeCtrl', function ($scope, $state, StateGo, $ionicPopover, $timeout) { // 跳到某页面 (不带参数, 单纯跳转) $scope.action.toPage = function(state){ StateGo.go(state); }; });
- 页面传参跳传
出参页面:
<div class="buttons" ng-click="action.toSearchResultListPage()">
<button class="button button-icon button-clear">
<i class="ion-ios-search-strong"></i>
</button>
</div>
<!-------------------- 顶部标题 -----------------------> <ion-nav-buttons side="left"> <div class="buttons" ng-click="action.toPage('message-list')"> <button class="button button-icon button-clear"> <i class="fa fa-commenting-o"> <span class="badge badge-assertive" ng-if="true">9</span> </i> </button> </div> </ion-nav-buttons> <ion-nav-buttons side="right"> <div class="buttons" ng-click="action.toSearchResultListPage()"> <button class="button button-icon button-clear"> <i class="ion-ios-search-strong"></i> </button> </div> </ion-nav-buttons> <ion-nav-title> <h1 class="title" ng-click="action.openPopover($event)"> <button class="button button-clear dropdown_btn" ng-click="action.openPopover($event)"> 信谁<i class="ion-ios-arrow-down"></i> </button> </h1> </ion-nav-title>
//跳到搜索页 $scope.action.toSearchResultListPage = function(){ var outParams = {}; outParams.pageId = new Date(); StateGo.go('search-result-list',outParams); };
入参页面:
// 搜索
.state('search-result-list', {
url: '/search-result-list',
params: {
params: null
},
templateUrl: 'templates/search/search-result-list.html',
controller: 'SearchResultListCtrl'
})
angular.module('MrTrustApp.controllers') .controller('SearchMoreBigVOrModelResultListCtrl', function ($scope, $stateParams, $ionicHistory, StateGo) { //定义数据 $scope.data = {}; //入参 //$scope.inParams = {}; var inParams = angular.fromJson($stateParams.params); var searchType = $scope.data.searchType = inParams.type; //搜索类型 var searchText = $scope.data.searchText = inParams.searchText; //搜索文本 //定义动作 $scope.action = {}; //返回上一页========================================== $scope.action.toPreviewPage = function () { if ($ionicHistory.backView()) { $ionicHistory.goBack(); } else { StateGo.goHome(); } }; // 跳到某页面 $scope.action.toPage = function (state) { StateGo.go(state); }; //搜索操作 function toSearch(searchText) { <!-----------------------TODO:调接口 (函数传值:搜索文本)--------------------> //根据搜索类型不同,调相应接口 if (searchType == '大V') { //====模拟数据==== if (searchText == '1') { $scope.data.searchResult = [ { //头像,言值 没有模拟 title: '王二小', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' }, { //头像,言值 没有模拟 title: '二小', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' }, { //头像,言值 没有模拟 title: '王小', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' }, { //头像,言值 没有模拟 title: '王二', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' }, { //头像,言值 没有模拟 title: '王二小d', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' } ]; } else if (searchText == '122') { $scope.data.searchResult = [ { //头像,言值 没有模拟 title: '王二小122', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' }, { //头像,言值 没有模拟 title: '二小122', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' }, { //头像,言值 没有模拟 title: '王小122', intro: '窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴,窗外的麻雀在电线杆上多嘴' } ]; } else { $scope.data.searchResult = []; } //====模拟结束==== } else if (searchType == '模型') { //====模拟数据==== $scope.data.searchResult = [ { //头像没有模拟 title: '验证日:2016-03-01', intro: '预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点' }, { //头像没有模拟 title: '验证日:2016-03-11', intro: '预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点' }, { //头像没有模拟 title: '验证日:2016-03-22', intro: '预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点' }, { //头像没有模拟 title: '验证日:2016-03-14', intro: '预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点' }, { //头像没有模拟 title: '验证日:2016-03-31', intro: '预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点,预期点位:大于2048点' } ]; //====模拟结束==== } else { return false; } } //初始化搜索 toSearch(searchText); //实时搜索 $scope.action.toSearch = function (searchText) { toSearch(searchText); }; });