2016-01-20 114 views
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 &#8211; ADDO VISITS PENTECOST CONVENTION CENTRE", 
     "title_plain": "NANA AKUFO &#8211; 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&#039;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": {} 
    } 
    ] 
} 

感謝您的幫助。

+0

您需要做的第一件事是將ng-app指令(ng-app =「myApp」)作爲您的應用程序的根目錄,其他所有ng-指令都必須是其子目錄。 – Ma3x

+0

像這樣 - ''?它沒有工作。但它擺脫了一些錯誤。我對這件事很陌生。我現在得到的是 - ** PostsController不是一個函數,在js/loader.js **中得到了未定義的bla bla bla。我必須在onsen js文件中做額外的事情嗎?我實際上今天學習了角度js,所以我不太熟悉這門語言。我一直在努力做這個好幾天! –

+0

我不知道onsen-ui,所以不能幫助你。但這裏是你如何在你的示例中設置angularjs:https://jsfiddle.net/7xawhtfj/ – Ma3x

回答

0

當你將一些數據從一個控制器推送到另一個時,它將被保存在navigator.getCurrentPage()。options對象中,所以類似的東西應該可以工作。

angular.module('app').controller('FirstController', function ($scope, $http) { 
    // .. get myData somehow from the page 
    navi.pushPage('second-page.html', {myData: myData}); 
} 

angular.module('app').controller('SecondController', function ($scope, $http) { 
    // read the data that that was given by pushPage 
    $scope.data = navi.getCurrentPage().options.myData; 
}