AngularJSを使った別ページへの値の受け渡し

前提・実現したいこと

AngularJSでチェックボックスの値の結果をボタン（下記の完了ボタン）を押すことにより画面遷移と同時にデータを持っていき、別ページに選択したチェックボックスのvalue（下記の場合フルーツ名）を表示するというアプリケーションを作っています。同じページでは値をチェックボックスの下に表示できるのですが、別ページに表示となると何をどうしていいのか全くわかりません。
画面遷移は今のところ<a>タグを使って行っています。
知ってらっしゃる方居ましたらご教授お願いいたします。

該当のソースコード

html
1**index.html**
2
3<!DOCTYPE HTML>
4<html ng-app="myApp">
5
6<省略>
7
8<div ng-controller="AppController">
9<ul>
10  <li ng-repeat="fruit in fruits">
11    <label><input type="checkbox" ng-model="fruit.checked">{{fruit.name}}</label>
12  </li>
13</ul>
14<a href="test.html" ng-click="check()">
15    完了
16</a>
17    <p ng-repeat="data in foods">{{data}}</p>
18
19</div>
20</body>
21</html>

html
1**test.html**
2
3<!DOCTYPE HTML>
4<html ng-app="myApp">
5
6<省略>
7
8<div ng-controller="NewAppController">
9
10<p ng-repeat="data in testVar">{{data}}</p>
11
12</div>
13</body>
14</html>

js
1
2var testVar = [];
3
4var app = angular.module('myApp', []);
5
6//遷移元コントローラー
7app.controller('AppController', function($scope) {
8  $scope.fruits = [
9    {id: 1, name: 'リンゴ'},
10    {id: 2, name: 'バナナ'},
11    {id: 3, name: 'グレープ'},
12    {id: 4, name: 'オレンジ'},
13    {id: 5, name: 'ピーチ'}
14  ];
15
16  $scope.check = function() {
17     
18    angular.forEach($scope.fruits, function(value, index, array) {
19        if (value.checked) {
20            testVar.push(value.name);
21            console.log(value.name);
22        }
23        $scope.testVar = testVar;
24    });
25   };
26};
27
28//遷移先コントローラー
29app.controller('NewAppController', function($scope) {
30    $scope.testVar;
31});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

Controllerはあくまで一画面上での処理に特化したものですので、画面遷移が関わってくると、Controller以外のものと組み合わせて処理を構築しなければなりません。

最も単純な方法としては、以下のようにグローバル変数（以下の例ではvar = testVar）を用意しておいて、そこに遷移元のControllerで値を設定し、遷移先のControllerで参照するという方法です。

JavaScript
1var app = angular.module('myApp', []);
2
3//遷移元コントローラー
4app.controller('AppController', function($scope,GlobalService) {
5
6  var testVar = [];
7
8  $scope.fruits = [
9    {id: 1, name: 'リンゴ'},
10    {id: 2, name: 'バナナ'},
11    {id: 3, name: 'グレープ'},
12    {id: 4, name: 'オレンジ'},
13    {id: 5, name: 'ピーチ'}
14  ];
15
16  $scope.check = function() {
17
18    angular.forEach($scope.fruits, function(value, index, array) {
19        if (value.checked) {
20            testVar.push(value.name);
21            console.log(value.name);
22        }
23        GlobalService.testVar = testVar;
24    });
25   };
26};
27
28//遷移先コントローラー
29app.controller('NewAppController', function($scope,GlobalService) {
30    $scope.testVar = GlobalService.testVar;
31});
32
33
34//遷移先コントローラー
35app.service('GlobalService', function() {
36    this.testVar;
37});

私個人としては、画面遷移時の変数共有のためのServiceを用いて値の共有を行っています。
ServiceはAngularJSの動作において全画面で１つのみ存在しますのでControllerで依存性注入すれば値の共有に利用できます。

投稿2018/05/17 23:59

編集2018/05/18 05:51

akabee

総合スコア1947

sato1108

2018/05/18 02:05

お答えいただきありがとうございます。コードを今トライしている形に変更させて頂きました。遷移先に全く現れてくれません。初歩的な所でつまっているのではとは思っているのですが。。。（同時進行でfactoryで共有するという方も試しています。）

akabee

2018/05/18 02:27

回答のコードを変更してみました。これで受け取れないかお試しいただけませんでしょうか。

sato1108

2018/05/18 02:38

これは遷移先ページへの値の受け渡しはどうなっていますか？$scope.getTestVar;...?

akabee

2018/05/18 03:04

$scopeは利用していません。 testVarはグローバル変数です。詳しくは説明しませんが、monacaであれば画面全体で利用可能です。受け渡しているというよりは、testVarは画面全体で常に有効な変数であるということです。 getTestVarはNewAppControllerのローカル変数で、その名前で私が宣言しているだけです。ちなみに、受け取ることはできましたか？

sato1108

2018/05/18 05:18 編集

受取れていません。 htmlファイルを全く違うファイルにしているからでしょうか。（monacaでよくあるindex.htmlの中で画面遷移（page1.htmlだったりpage2.html）にしているのではない）また遷移先で js //遷移先コントローラー app.controller('NewAppController', function($scope) { function test(){ alert(testVar); } var getTestVar = testVar //受け取り }); を行ったところ、アラートには何も入っていなかったので、中身が来ていないと思われます。

akabee

2018/05/18 05:52

申し訳ありません、上手くいっていなかったのですね。なぜだろう。。再度回答のコードを修正しました。私のよく利用する、serviceを利用しての値の共有ですが、これでも上手くいきませんでしょうか。

sato1108

2018/05/18 06:04 編集

ほとんど間違いのないようにほとんどコピーアンドペーストでテストしてみましたが、やはりうまくいきませんでした。。 HTMLの<a href="test.html" ng-click="check()">ここで<a>タグでの遷移がいけないのでしょうか。今はMonacaのNoflameworkというテンプレートにangularJSを入れているだけなので、OnsenUIは使用しておりません。

akabee

2018/05/18 07:00

そういうことですか、<a>タグで遷移すると上手くいかないと思います。 ※添付頂いているコードに記載されていましたが見落としていました。 <省略>となっているところが気になっていましたが、もしかしてどちらのページでも同じjavascriptを読み込んでいますか？ ons.navigatorを利用した画面遷移を試してみてください。ファイルを分けてもons.navigatorは利用できますよ。 ※index.htmlの中で画面遷移（page1.htmlだったりpage2.html）にしなくてもよい

akabee

2018/05/18 07:06

<a>タグは文字通り画面を切り替えるわけですが、MonacaはSPA（シングルページアプリケーション）を謳っており、ons-navigatorはその設計思想の中で画面遷移を実現する機能です。 index.htmlが読み込まれた後は「画面遷移しているように見せかけている」だけで、一度読み込んだjavascriptは永続的に利用します。なので当初のとおりグローバル変数などが有効になるはずだったわけです。 <a>タグによる画面遷移はhtmlを新しく読み込むため、一度読み込んだjavascriptは有効でなくなり、値の受け渡しができなくなります。（どうにかすればできるのかもしれませんが、monaca, AnguarJSを利用するのであればSPAに基づいた設計をすべきでしょう。）

sato1108

2018/05/18 09:04

私も今までSPAなどあまり考えてこなかったですが、ようやく理解できました。 Monacaの良さを何も使えていませんでした。。。新しくonsen等使って全てやり直してみたいと思います。ありがとうございました。

行動規範の内容に同意します