###前提・実現したいこと
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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。