AngularJS如何實(shí)現(xiàn)跨頁(yè)面?zhèn)髦?/h1>

這篇文章主要介紹了AngularJS如何實(shí)現(xiàn)跨頁(yè)面?zhèn)髦?，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鹿城ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鹿城網(wǎng)站制作公司

用的ionic

這里使用ui-router傳值，用來(lái)在跳轉(zhuǎn)頁(yè)面的同時(shí)帶著你想帶走的東西一起跳走

需求是這樣的，我有一個(gè)商品單子（概覽頁(yè)），點(diǎn)一個(gè)商品就可以去看它的詳情（詳情頁(yè)）
要解決的問(wèn)題就是把概覽頁(yè)被點(diǎn)擊的商品的id傳給詳情頁(yè)，詳情頁(yè)拿著這個(gè)id給后臺(tái)，后臺(tái)返回對(duì)應(yīng)的需要的json

下面開始實(shí)現(xiàn)

.controller('CafeCtrl', function($scope, cafeData, $state) { //往外傳值的controller里加一個(gè)$state
 $scope.cafeList = cafeData.All();
 $scope.goDetail = function(id) {
  $state.go('itemDetail',{sort : "cafe", id : id}); //就拿它傳
 };
})

在傳值的一行：

$state.go('itemDetail',{sort : "cafe", id : id});
//前面的是變量名，后邊的是值

我的理解是：塞了兩個(gè)變量到一個(gè)中轉(zhuǎn)的名叫$stateParams的什么東西里面，controller里面寫法就是這樣子的,頁(yè)面上ng-click="goDetail(item.id)"調(diào)用它就可以了

app.js里，接收值的頁(yè)面（詳情頁(yè)）.state這么寫，留兩個(gè)位置給剛才傳出來(lái)的東西

.state('itemDetail', {
 url: '/itemDetail/:sort/:id/', //這里就是那兩個(gè)要傳的東西，名字要對(duì)應(yīng)相同
 templateUrl: 'templates/itemDetail.html',
 controller: 'ItemDetailCtrl'
})

然后再去接收值的頁(yè)面（詳情頁(yè)）接收這倆值存?zhèn)z對(duì)象里面（接受并存下了傳來(lái)的兩個(gè)值）

.controller('ItemDetailCtrl', function($scope, $stateParams, $state) { //加個(gè)$stateParams
 $scope.sort = $stateParams.sort;
 $scope.itemId = $stateParams.id;
})

在上面加個(gè)$stateParams，然后下面scope一個(gè)對(duì)象，把你要的值從$stateParams里面拿點(diǎn)兒出來(lái)賦值給它就ok了

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“AngularJS如何實(shí)現(xiàn)跨頁(yè)面?zhèn)髦怠边@篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

分享文章：AngularJS如何實(shí)現(xiàn)跨頁(yè)面?zhèn)髦?
文章URL：http://weahome.cn/article/ggcedj.html