2
我不知道這是否是一個角度js問題。無論如何,我正在爲我的移動應用程序使用onsen ui,並且我需要一種方式從一個頁面轉換到另一個頁面,並在這些頁面之間共享數據。下面是我的app.js代碼。溫泉角js api電話
// Wordpress Posts Controller
var app = angular.module('myApp', []);
app.controller('PostsController', function($scope, $http, PostsData) {
$http({method: 'GET', url: 'http://akufoaddo2016.com/api/get_recent_posts/'}).
success(function(data, status, headers, config) {
$scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
});
$scope.showDetail = function(index) {
var selectedItem = $scope.posts[index];
PostsData.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('page4.html', selectedItem);
}
});
我想要顯示的數據頁面是page4.html,代碼如下。
<ons-page ng-controller="PostsController">
<ons-toolbar style="background-color: #132e42" >
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="ion-android-more-vertical" style="color: #fff"></ons-icon></ons-toolbar-button>
</div>
<div class="center" style="font-weight:bold; color:#fff;">Nana Akuffu Addo</div>
</ons-toolbar>
<ons-scroller>
<div ng-app="myApp" ng-repeat="post in posts">
<ons-row >
<h3 class="title" ng-click="showDetail($index)">{{post.title}}</h3>
<p>{{post.excerpt}}</p>
</ons-row>
</div>
</ons-scroller>
</ons-page>
我不知道我在做什麼錯;它只是不會打印任何值。
如果你想知道的JSON數據的樣子:
{
"count": 2,
"status": "ok",
"count_total": 2,
"pages": 1,
"posts": [
{
"id": 4,
"type": "post",
"slug": "nana-akufo-addo-visits-pentecost-convention-centre",
"url": "http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/",
"status": "publish",
"title": "NANA AKUFO – ADDO VISITS PENTECOST CONVENTION CENTRE",
"title_plain": "NANA AKUFO – ADDO VISITS PENTECOST CONVENTION CENTRE",
"content": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa. <a href=\"http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/#more-4\" class=\"more-link\">Read more</a></p>\n",
"excerpt": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa.</p>\n",
"date": "2016-01-17 23:56:42",
"modified": "2016-01-17 23:56:42",
"categories": [
{
"id": 2,
"slug": "blog",
"title": "Blog",
"description": "",
"parent": 0,
"post_count": 1
}
],
"tags": [],
"author": {
"id": 1,
"slug": "admin",
"name": "admin",
"first_name": "",
"last_name": "",
"nickname": "admin",
"url": "",
"description": ""
},
"comments": [],
"attachments": [
{
"id": 5,
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"slug": "akufoaddo-pentecost-jan16",
"title": "akufoaddo-pentecost-jan16",
"description": "",
"caption": "",
"parent": 4,
"mime_type": "image/jpeg",
"images": {
"full": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
"width": 150,
"height": 150
},
"medium": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
"width": 300,
"height": 233
},
"medium_large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"post-thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
}
}
}
],
"comment_count": 0,
"comment_status": "open",
"thumbnail": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"custom_fields": {},
"thumbnail_size": "post-thumbnail",
"thumbnail_images": {
"full": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
"width": 150,
"height": 150
},
"medium": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
"width": 300,
"height": 233
},
"medium_large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"post-thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
}
}
},
{
"id": 1,
"type": "post",
"slug": "hello-world",
"url": "http://akufoaddo2016.com/2016/01/13/hello-world/",
"status": "publish",
"title": "Hello world!",
"title_plain": "Hello world!",
"content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"date": "2016-01-13 21:24:36",
"modified": "2016-01-13 21:24:36",
"categories": [],
"tags": [],
"author": {
"id": 1,
"slug": "admin",
"name": "admin",
"first_name": "",
"last_name": "",
"nickname": "admin",
"url": "",
"description": ""
},
"comments": [
{
"id": 1,
"name": "Mr WordPress",
"url": "https://wordpress.org/",
"date": "2016-01-13 21:24:36",
"content": "<p>Hi, this is a comment.<br />\nTo delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.</p>\n",
"parent": 0
}
],
"attachments": [],
"comment_count": 1,
"comment_status": "open",
"custom_fields": {}
}
]
}
感謝您的幫助。
您需要做的第一件事是將ng-app指令(ng-app =「myApp」)作爲您的應用程序的根目錄,其他所有ng-指令都必須是其子目錄。 – Ma3x
像這樣 - ''?它沒有工作。但它擺脫了一些錯誤。我對這件事很陌生。我現在得到的是 - ** PostsController不是一個函數,在js/loader.js **中得到了未定義的bla bla bla。我必須在onsen js文件中做額外的事情嗎?我實際上今天學習了角度js,所以我不太熟悉這門語言。我一直在努力做這個好幾天! –
我不知道onsen-ui,所以不能幫助你。但這裏是你如何在你的示例中設置angularjs:https://jsfiddle.net/7xawhtfj/ – Ma3x