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

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

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

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

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

1858閲覧

Onsenui + Angularで、文字のタップ時に別ページを表示しようとするとエラーになります。

motsu3DJ

総合スコア13

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/03 12:10

Onsenui + Angularでアプリ開発を行っている途中です。
10月中旬頃までは以下のソースで問題なく動作していたのですが、
本日起動したところ、初期ページの

ng-click="tap('logintab.html')"

が動作した際に、添付のエラーメッセージが表示されてしまいうまく動作しません。
変更した箇所に心当たりはまったくないのですが、
どこを調べていいものかわからず、お恥ずかしい限りですが皆さんのお力をお借りしたく思います。

##エラーメッセージ

icon.attributeChangedCallback is not a function
angular.js:13920 TypeError: icon.attributeChangedCallback is not a function
at TabElement.value (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:6:11646)
at file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:6:14960
at file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:2:11568
at Array.forEach (native)
at consumeQueue (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:2:11534)
at contentReady (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:2:11750)
at TabElement.value (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:6:14929)
at CustomElementInternals.value (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:3:12327)
at CustomElementInternals.value (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:3:11460)
at CustomElementInternals.value (file:///C:/TGMApp/kumaapp/www/lib/onsenui/js/onsenui.min.js:3:10586)

##ソースコードを以下に記入します。
---Index.html----#

<!DOCTYPE HTML> <html> <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="js/main.js"></script> <script src="components/loader.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/style.css"> </head> <body class="fadeout" ng-controller="myApp"> <ons-splitter var="mySplitter"> <ons-splitter-side collapse></ons-splitter-side> <div class="center"> アプリ </div> <ons-splitter-content></ons-splitter-content> </ons-splitter>
<!-- タブ表示用ページ--> <ons-template id="tabK.html"> <ons-page> <ons-tabbar var="tab" position="bottom"> <ons-tab page="main.html" label="ホーム" icon="home" active></ons-tab> <ons-tab page="yoyaku.html" label="熊の待ち合わせ" icon="fa-tasks"></ons-tab> <ons-tab page="letter.html" label="熊のお便り" icon="ion-paper-airplane"></ons-tab> <ons-tab page="config.html" label="設定" icon="gear"></ons-tab> </ons-tabbar> </ons-page> </ons-template> <!-- タブ表示用ページ 非会員用--> <ons-template id="tabN.html"> <ons-page> <ons-tabbar var="tab" position="bottom"> <ons-tab class="color_not_login" page="main.html"> <div class="my-icon"> <div class="my-icon-sub"> <img src="img/40.png" alt="熊アイコン"> </div> </div> </ons-tab> <ons-tab class="color_not_login" page="hikaiinyoyaku.html" label="熊のお試し" icon="fa-ticket"></ons-tab> <ons-tab class="color_not_login" page="letter.html" label="熊のお便り" icon="ion-paper-airplane"></ons-tab> <ons-tab class="color_not_login" page="config.html" label="設定" icon="gear"></ons-tab> </ons-tabbar> </ons-page> </ons-template> <!-- ログインタブ表示用ページ--> <ons-template id="logintab.html"> <ons-page ng-controller="HomeController" ng-init="HomeInit()"> <ons-tabbar ng-controller="LoginTabController" var="tab" position="bottom" animation="none"> <ons-tab page="main.html" label="熊イラスト" icon="home" active></ons-tab> <ons-tab page="aisatsu.html" label="ご挨拶" icon="fa-tasks"></ons-tab> <ons-tab page="login.html" label="ログイン" icon="fa-users"></ons-tab> <ons-tab page="join.html" label="熊の仲間入り" icon="fa-users"></ons-tab> </ons-tabbar> <h1>アプリ タブページ </h1> </ons-page> </ons-template> <ons-template id="top.html"> <ons-page id="top"> <div class="title center"> <h1>熊の◯◯公式アプリ </h1> </div> <div ng-click="tap('logintab.html')" class="blinking center"> <h1>Tap here.</h1> </div> </ons-page> </ons-template> <ons-template id="home.html"> <ons-page id="home"> <img class="topImg center" src="img/01.png"> </ons-page> </ons-template> <ons-template id="main.html"> <ons-page id="main"> <div class="content"> <div class="main"> <p>アプリ</p> </div> </div> </ons-page> </ons-template> <ons-template id="aisatsu.html"> <ons-page id="main"> <div class="content"> <div class="main"> <p>ご挨拶</p> </div> </div> </ons-page> </ons-template> <ons-template id="login.html"> <ons-page id="login"> <div class="content"> <div class="main center"> <p>ログイン</p> </div> <ons-list-item> <div class="center"> 登録会員としてログイン </div> <div class="right"> <ons-switch id="swich_kaiin" checked></ons-switch> </div> </ons-list-item> <p></p> <div class="Button_Wrapper_center"> <span> <div> <input class="text-input text-input--material" placeholder="Username" type="text" required> </div> <br /> <div> <input class="text-input text-input--material" placeholder="Password" type="password" required> </div> </span> <div class="loginButton center"> <ons-button ng-click="login()" modifier="material">ログイン</ons-button> </div> </div> <p></p> <div class="Button_Wrapper_center"> <div class="FBloginButton"> <ons-button id="fblogin" modifier="material" onclick="mySplitter.content.load( 'fblogin.html')">Facebookログイン</ons-button> </div> </div> </div> </ons-page> </ons-template> <ons-template id="join.html"> <ons-page id="join"> <div class="content"> <div class="main center"> <p>熊の仲間入り</p> </div> </div> </ons-page> </ons-template> <ons-template id="yoyaku.html"> <ons-page id="yoyaku"> <div class="content"> <div class="main"> <p>熊の待ち合わせ</p> </div> </div> </ons-page> </ons-template> <ons-template id="hikaiinyoyaku.html"> <ons-page id="hikaiinyoyaku"> <div class="content"> <div class="main"> <p>熊のお試し</p> </div> </div> </ons-page> </ons-template> <ons-template id="letter.html"> <ons-page id="letter"> <div class="content"> <div class="main"> <p>熊のお便り</p> </div> </div> </ons-page> </ons-template> <ons-template id="config.html"> <ons-page id="config"> <div class="content"> <div class="main"> <p>設定</p> </div> </div> </ons-page> </ons-template> <template id="fblogin.html"> <ons-page id="fblogin"> <div class="content"> <div class="main"> <p>Facbookログイン</p> </div> </div> </ons-page> </template>
</body> </html>

###試したこと
index.htmlの各項目をコメント化して実行してみましたが、原因となる箇所の特定ができませんでした。

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

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

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

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

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

guest

回答1

0

自己解決

OnsenUI とAngularを以下のバージョンに入れ替えたところ解決しました。
お騒がせしました。

OnsenUI 2.8.2
Angular v1.6.6

投稿2017/12/05 07:30

motsu3DJ

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問