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

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

ただいまの
回答率

91.27%

  • JavaScript

    11734questions

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

  • Monaca

    753questions

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

  • AngularJS

    495questions

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

  • Onsen UI

    243questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 74

shori0128

score 10

前提・実現したいこと

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

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

ons.bootstrap()
.factory('sharedScope', function ($rootScope) {
  let sharedScope = {};

  return {
    setScope: function (key, value) {
      sharedScope[key] = value;
    },
    getScope: function (key) {
      return sharedScope[key];
    }
  };
})
.controller('kijiCatalogCtrl', function ($scope, sharedScope) {
    $scope.item = [];

    //■ 記事一覧表示
    const showKiji = function () {
      Promise.resolve()
        .then(function () {
          return db.select(sql);
        })
        .then(function (result) {
          let localItem = [];
          result.forEach(function (record, index) {
            localItem.push({
              key: record.XML_PATH,
              xmlPath: path(kijiDir.nativeURL, record.XML_PATH),
              imagePath: '',
              thumbPath: '',
              title: record.TITLE,
              honbun: record.HONBUN,
              category: record.CATEGORY,
              author: record.AUTHOR,
              sendFlg: record.SEND_FLG,
              updateDate: record.UPDATE_DATE
            });
          });
          $scope.item = localItem;
          $scope.$apply();
        })
        .catch(getErr);
    };

    //■ 起動時
    ons.ready(function () {
      sharedScope.setScope('reloadKiji', {
        reload: function () {
          showKiji();
        }
      });
      showKiji();
    });

    $scope.delegate = {
      configureItemScope: function (index, itemScope) {
        itemScope.item = {
          key: $scope.item[index].key,
          xmlPath: $scope.item[index].xmlPath,
          imagePath: $scope.item[index].imagePath,
          thumbPath: $scope.item[index].thumbPath,
          title: $scope.item[index].title != '' ? $scope.item[index].title : '(無題)',
          honbun: $scope.item[index].honbun,
          category: $scope.item[index].category,
          author: $scope.item[index].author,
          sendFlg: $scope.item[index].sendFlg,
          updateDate: $scope.item[index].updateDate
        };
      },
      calculateItemHeight: function (index) {
        return 91;
      },
      countItems: function () {
        return $scope.item.length;
      }
    };

    //■ 記事編集画面オープン
    $scope.openEditor = function (index) {
      sharedScope.setScope('kijiEditCtrl', {
        key: $scope.item[index].key,
        xmlPath: $scope.item[index].xmlPath,
        imagePath: $scope.item[index].imagePath,
        thumbPath: $scope.item[index].thumbPath,
        title: $scope.item[index].title,
        honbun: $scope.item[index].honbun,
        category: $scope.item[index].category,
        author: $scope.item[index].author,
        sendFlg: $scope.item[index].sendFlg,
        updateDate: $scope.item[index].updateDate
      });

      tabNavi1.pushPage('kijiEdit.html', pageOption);
    };
  })
  .controller('kijiEditCtrl', function ($scope, $rootScope, sharedScope) {
    //■ 画面ロード時
    $scope.getData = function (event) {
      //~データ取得した内容を画面に反映~
    };

    //■ 保存処理
    const saveProcess = function (xml) {
      const db = new DB();

      db.open();

      const title = (isDefined($scope.title)) ? $scope.title : '';
      const honbun = (isDefined($scope.honbun)) ? $scope.honbun : '';
      const category = (isDefined($scope.category)) ? $scope.category : '';
      const author = (isDefined($scope.author)) ? $scope.author : '';
      const now = formatDate(new Date());

      if (isDefined(xml)) {
        //~データの更新処理~
        db.update(sql)
          .then(function (result) {
            if (result === true) {
              sharedScope.getScope('reloadKiji').reload();
            }
          })
          .catch(function (err) {
            window.alert(err);
            console.log(err);
          });
      } else {
        //新規処理
        xml = 'SCM_K_' + formatDateStr(new Date()) + '_' + createRandomStr() + '.xml';

        //~データの挿入処理~

        db.insert(sql)
          .then(function (result) {
            if (result === true) {
              sharedScope.setScope('kijiEditCtrl', {
                key: xml,
                xmlPath: path(kijiDir.nativeURL, xml),
                imagePath: '',
                thumbPath: '',
                title: title,
                honbun: honbun,
                category: category,
                author: author,
                sendFlg: null,
                updateDate: now
              });
              sharedScope.getScope('reloadKiji').reload();
            }
          })
          .catch(getErr);
      }
    };

    //■ 上書保存
    $scope.overWriteFile = function () {
      const data = sharedScope.getScope('kijiEditCtrl')
      const xml = (isDefined(data.key)) ? data.key : undefined;
      saveProcess(xml);
    };

    //■ 別名保存
    $scope.createFile = function () {
      saveProcess();
    };
  })
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <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'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <script src="ext/imageResizer/resize.js"></script>
  <script type="text/javascript" src="func.js"></script>
  <script type="text/javascript" src="promise.js"></script>
  <script type="text/javascript" src="webSql.js"></script>
  <script type="text/javascript" src="index.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/bootstrap-4.0.0-beta-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/selectBox.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <ons-navigator id="appNavi" page="common.html"></ons-navigator>

  <ons-template id="tabNavi1.html">
    <ons-navigator id="tabNavi1" page="kijiCatalog.html"></ons-navigator>
  </ons-template>

  <ons-template id="tabNavi2.html">
    <ons-navigator id="tabNavi2" page="gazoCatalog.html"></ons-navigator>
  </ons-template>

  <ons-template id="tabNavi3.html">
    <ons-navigator id="tabNavi3" page="templateEdit.html"></ons-navigator>
  </ons-template>
</body>

</html>

<ons-template id="kijiCatalog.html">
  <ons-page id="kijiCatalog" ng-controller="kijiCatalogCtrl">
    <ons-list>
      <ons-list-item class="item" modifier="chevron" ons-lazy-repeat="delegate" ng-click="openEditor($index)" tappable>
        <ons-row>
          <ons-col>
            <header>
              <span class="title" ng-model="title">{{item.title}}</span>
              <span class="label">{{item.updateDate}}</span>
            </header>
            <p style="height: 10px"></p>
            <span align="right">
              <ons-icon icon="check-circle" size="1rem" style="color: #00fa9a;"></ons-icon>
              <ons-icon icon="exclamation-circle" size="1rem" style="color: #ff0000;">
  </ons-icon>
              <input type="checkbox" class="checkBox" name="checkBoxKiji" ng-click="stopBubbling($event);">
            </span>
          </ons-col>
        </ons-row>
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

<ons-template id="kijiEdit.html">
  <ons-page id="kijiEdit" ng-controller="kijiEditCtrl" ons-init="getData($event)">
    <ons-row class="bgWrapper">
      <ons-row class="caption">
        <ons-row>タイトル</ons-row>
        <ons-row class="field">
          <input type="text" id="title" class="inputCol" ng-model="title">
        </ons-row>
        <ons-row>本文</ons-row>
        <ons-row class="field">
          <textarea id="textarea" class="inputArea" rows="7" ng-model="honbun"></textarea>
        </ons-row>
        <ons-row class="field">
          <ons-col width="50%" style="padding-right: 5px;">
            <ons-row>種別</ons-row>
            <ons-row>
              <input type="text" class="inputCol" ng-model="category">
            </ons-row>
          </ons-col>
          <ons-col width="50%" style="padding-left: 5px;">
            <ons-row>作成者</ons-row>
            <ons-row>
              <input type="text" class="inputCol" ng-model="author">
            </ons-row>
          </ons-col>
        </ons-row>
      </ons-row>
      <ons-row style="margin-top:10px;">
        <ons-col width="50%" style="padding-right: 5px;">
          <ons-button style="width: 100%;" ng-click="overWriteFile();">
            <div class="btnWrapper">
              <p>上書保存</p>
            </div>
          </ons-button>
        </ons-col>
        <ons-col width="50%" style="padding-left: 5px;">
          <ons-button style="width: 100%;" ng-click="createFile();">
            <div class="btnWrapper">
              <p>別名保存</p>
            </div>
          </ons-button>
        </ons-col>
      </ons-row>
    </ons-row>
  </ons-page>
</ons-template>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/21 17:29

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

    キャンセル

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

ただいまの回答率

91.27%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11734questions

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

  • Monaca

    753questions

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

  • AngularJS

    495questions

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

  • Onsen UI

    243questions

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