質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

2196閲覧

$scope.$apply()で更新されない

shori0128

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/12/21 07:36

編集2017/12/21 08:04

###前提・実現したいこと
monacaでonsenui+angularjs1でandroidアプリの開発をしております。
以下に記述するソースで$scope.$apply()でリストが更新されません。

具体的に
①アプリの起動と同時に、showKiji()で$scope.itemを更新。ビューに反映。
②kijiCatalog.htmlのons-list-itemをタップすると、kijiEdit.htmlへpushPage。
③kijiEdit.htmlで「上書き保存」、「別名保存」すると、DBの値を更新した後、共有スコープに格納しておいた、showKiji()を実行。
④「別名保存」を実行した場合は、$scope.itemの値がビューに反映されるが、「上書き保存」を実行した場合は、ビューに反映されない。
別名保存の動作としては、DBにレコードを新規登録するため、itemの件数が1件増えることになりますが、上書き保存の場合はレコードの件数は増やさず、既存のレコードの値を更新するだけです。

$scope.itemの値の変更はすべて監視されている認識なのですが、何故値の更新の場合はビューに反映されないのでしょうか。
どなたか原因について思い当たる方、ご教示いただけないでしょうか。

###該当のソースコード(抜粋)

javascript

1ons.bootstrap() 2.factory('sharedScope', function ($rootScope) { 3 let sharedScope = {}; 4 5 return { 6 setScope: function (key, value) { 7 sharedScope[key] = value; 8 }, 9 getScope: function (key) { 10 return sharedScope[key]; 11 } 12 }; 13}) 14.controller('kijiCatalogCtrl', function ($scope, sharedScope) { 15 $scope.item = []; 16 17 //■ 記事一覧表示 18 const showKiji = function () { 19 Promise.resolve() 20 .then(function () { 21 return db.select(sql); 22 }) 23 .then(function (result) { 24 let localItem = []; 25 result.forEach(function (record, index) { 26 localItem.push({ 27 key: record.XML_PATH, 28 xmlPath: path(kijiDir.nativeURL, record.XML_PATH), 29 imagePath: '', 30 thumbPath: '', 31 title: record.TITLE, 32 honbun: record.HONBUN, 33 category: record.CATEGORY, 34 author: record.AUTHOR, 35 sendFlg: record.SEND_FLG, 36 updateDate: record.UPDATE_DATE 37 }); 38 }); 39 $scope.item = localItem; 40 $scope.$apply(); 41 }) 42 .catch(getErr); 43 }; 44 45 //■ 起動時 46 ons.ready(function () { 47 sharedScope.setScope('reloadKiji', { 48 reload: function () { 49 showKiji(); 50 } 51 }); 52 showKiji(); 53 }); 54 55 $scope.delegate = { 56 configureItemScope: function (index, itemScope) { 57 itemScope.item = { 58 key: $scope.item[index].key, 59 xmlPath: $scope.item[index].xmlPath, 60 imagePath: $scope.item[index].imagePath, 61 thumbPath: $scope.item[index].thumbPath, 62 title: $scope.item[index].title != '' ? $scope.item[index].title : '(無題)', 63 honbun: $scope.item[index].honbun, 64 category: $scope.item[index].category, 65 author: $scope.item[index].author, 66 sendFlg: $scope.item[index].sendFlg, 67 updateDate: $scope.item[index].updateDate 68 }; 69 }, 70 calculateItemHeight: function (index) { 71 return 91; 72 }, 73 countItems: function () { 74 return $scope.item.length; 75 } 76 }; 77 78 //■ 記事編集画面オープン 79 $scope.openEditor = function (index) { 80 sharedScope.setScope('kijiEditCtrl', { 81 key: $scope.item[index].key, 82 xmlPath: $scope.item[index].xmlPath, 83 imagePath: $scope.item[index].imagePath, 84 thumbPath: $scope.item[index].thumbPath, 85 title: $scope.item[index].title, 86 honbun: $scope.item[index].honbun, 87 category: $scope.item[index].category, 88 author: $scope.item[index].author, 89 sendFlg: $scope.item[index].sendFlg, 90 updateDate: $scope.item[index].updateDate 91 }); 92 93 tabNavi1.pushPage('kijiEdit.html', pageOption); 94 }; 95 }) 96 .controller('kijiEditCtrl', function ($scope, $rootScope, sharedScope) { 97 //■ 画面ロード時 98 $scope.getData = function (event) { 99 //~データ取得した内容を画面に反映~ 100 }; 101 102 //■ 保存処理 103 const saveProcess = function (xml) { 104 const db = new DB(); 105 106 db.open(); 107 108 const title = (isDefined($scope.title)) ? $scope.title : ''; 109 const honbun = (isDefined($scope.honbun)) ? $scope.honbun : ''; 110 const category = (isDefined($scope.category)) ? $scope.category : ''; 111 const author = (isDefined($scope.author)) ? $scope.author : ''; 112 const now = formatDate(new Date()); 113 114 if (isDefined(xml)) { 115 //~データの更新処理~ 116 db.update(sql) 117 .then(function (result) { 118 if (result === true) { 119 sharedScope.getScope('reloadKiji').reload(); 120 } 121 }) 122 .catch(function (err) { 123 window.alert(err); 124 console.log(err); 125 }); 126 } else { 127 //新規処理 128 xml = 'SCM_K_' + formatDateStr(new Date()) + '_' + createRandomStr() + '.xml'; 129 130 //~データの挿入処理~ 131 132 db.insert(sql) 133 .then(function (result) { 134 if (result === true) { 135 sharedScope.setScope('kijiEditCtrl', { 136 key: xml, 137 xmlPath: path(kijiDir.nativeURL, xml), 138 imagePath: '', 139 thumbPath: '', 140 title: title, 141 honbun: honbun, 142 category: category, 143 author: author, 144 sendFlg: null, 145 updateDate: now 146 }); 147 sharedScope.getScope('reloadKiji').reload(); 148 } 149 }) 150 .catch(getErr); 151 } 152 }; 153 154 //■ 上書保存 155 $scope.overWriteFile = function () { 156 const data = sharedScope.getScope('kijiEditCtrl') 157 const xml = (isDefined(data.key)) ? data.key : undefined; 158 saveProcess(xml); 159 }; 160 161 //■ 別名保存 162 $scope.createFile = function () { 163 saveProcess(); 164 }; 165 })

html

1<head> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 4 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 5 <script src="components/loader.js"></script> 6 <script src="lib/angular/angular.min.js"></script> 7 <script src="lib/onsenui/js/onsenui.min.js"></script> 8 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 9 <script src="ext/imageResizer/resize.js"></script> 10 <script type="text/javascript" src="func.js"></script> 11 <script type="text/javascript" src="promise.js"></script> 12 <script type="text/javascript" src="webSql.js"></script> 13 <script type="text/javascript" src="index.js"></script> 14 15 <link rel="stylesheet" href="components/loader.css"> 16 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 17 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 18 <link rel="stylesheet" href="css/bootstrap-4.0.0-beta-dist/css/bootstrap.min.css"> 19 <link rel="stylesheet" href="css/selectBox.css"> 20 <link rel="stylesheet" href="css/style.css"> 21</head> 22 23<body> 24 <ons-navigator id="appNavi" page="common.html"></ons-navigator> 25 26 <ons-template id="tabNavi1.html"> 27 <ons-navigator id="tabNavi1" page="kijiCatalog.html"></ons-navigator> 28 </ons-template> 29 30 <ons-template id="tabNavi2.html"> 31 <ons-navigator id="tabNavi2" page="gazoCatalog.html"></ons-navigator> 32 </ons-template> 33 34 <ons-template id="tabNavi3.html"> 35 <ons-navigator id="tabNavi3" page="templateEdit.html"></ons-navigator> 36 </ons-template> 37</body> 38 39</html> 40 41<ons-template id="kijiCatalog.html"> 42 <ons-page id="kijiCatalog" ng-controller="kijiCatalogCtrl"> 43 <ons-list> 44 <ons-list-item class="item" modifier="chevron" ons-lazy-repeat="delegate" ng-click="openEditor($index)" tappable> 45 <ons-row> 46 <ons-col> 47 <header> 48 <span class="title" ng-model="title">{{item.title}}</span> 49 <span class="label">{{item.updateDate}}</span> 50 </header> 51 <p style="height: 10px"></p> 52 <span align="right"> 53 <ons-icon icon="check-circle" size="1rem" style="color: #00fa9a;"></ons-icon> 54 <ons-icon icon="exclamation-circle" size="1rem" style="color: #ff0000;"> 55 </ons-icon> 56 <input type="checkbox" class="checkBox" name="checkBoxKiji" ng-click="stopBubbling($event);"> 57 </span> 58 </ons-col> 59 </ons-row> 60 </ons-list-item> 61 </ons-list> 62 </ons-page> 63</ons-template> 64 65<ons-template id="kijiEdit.html"> 66 <ons-page id="kijiEdit" ng-controller="kijiEditCtrl" ons-init="getData($event)"> 67 <ons-row class="bgWrapper"> 68 <ons-row class="caption"> 69 <ons-row>タイトル</ons-row> 70 <ons-row class="field"> 71 <input type="text" id="title" class="inputCol" ng-model="title"> 72 </ons-row> 73 <ons-row>本文</ons-row> 74 <ons-row class="field"> 75 <textarea id="textarea" class="inputArea" rows="7" ng-model="honbun"></textarea> 76 </ons-row> 77 <ons-row class="field"> 78 <ons-col width="50%" style="padding-right: 5px;"> 79 <ons-row>種別</ons-row> 80 <ons-row> 81 <input type="text" class="inputCol" ng-model="category"> 82 </ons-row> 83 </ons-col> 84 <ons-col width="50%" style="padding-left: 5px;"> 85 <ons-row>作成者</ons-row> 86 <ons-row> 87 <input type="text" class="inputCol" ng-model="author"> 88 </ons-row> 89 </ons-col> 90 </ons-row> 91 </ons-row> 92 <ons-row style="margin-top:10px;"> 93 <ons-col width="50%" style="padding-right: 5px;"> 94 <ons-button style="width: 100%;" ng-click="overWriteFile();"> 95 <div class="btnWrapper"> 96 <p>上書保存</p> 97 </div> 98 </ons-button> 99 </ons-col> 100 <ons-col width="50%" style="padding-left: 5px;"> 101 <ons-button style="width: 100%;" ng-click="createFile();"> 102 <div class="btnWrapper"> 103 <p>別名保存</p> 104 </div> 105 </ons-button> 106 </ons-col> 107 </ons-row> 108 </ons-row> 109 </ons-page> 110</ons-template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

自己解決しました。
lazy-repeatにあるrefreshメソッドを使ったらビューの更新が行えました。
ご回答、閲覧いただいた方、ありがとうございました。

投稿2017/12/21 09:34

shori0128

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

環境がないのでわかりませんが、.$apply()というメソッドが用意されているのでしょうか?
.apply()のような記述だったりしませんか?

投稿2017/12/21 08:24

yambejp

総合スコア114839

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shori0128

2017/12/21 08:29

>yambejp様 ご回答ありがとうございます。 私も初心者のため人に説明できるほどではないのですが、angulajsで、ビューに変更を通知するメソッドが用意されており、$apply()がそれのはずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問