monacaのOnsen UI V2 JS Splitterでアプリを作成しています。
アプリは各ページにAngularJSを使って制御しようと思ったのですが、なぜかAngularJSが動作しませんでした。
プログラムは以下に載せます。
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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="js/angulerjs.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"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content .load(page) .then(menu.close.bind(menu)); }; </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item> <ons-list-item onclick="fn.load('settings.html')" tappable> Settings </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> About </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <ons-template id="home.html"> <ons-page ng-controller="homeController"> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Main </div> </ons-toolbar> </ons-page> </ons-template> <ons-template id="settings.html"> <ons-page ng-controller="settingController"> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Settings </div> </ons-toolbar> </ons-page> </ons-template> <ons-template id="about.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> About </div> </ons-toolbar> </ons-page> </ons-template> </body> </html>
angulerjs.js var app = ons.bootstrap("myApp", ["onsen"]); app.controller("homeController", ["$scope", function($scope) { ons.ready(function() { alert('home'); }); }]); app.controller("settingController", ["$scope", function($scope) { ons.ready(function() { alert('setting'); }); }]);
無知ですみませんが、ご教授よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。