javascript - Argument 'MasterController' is not a function, got undefined -
i'm trying 1 of pages in app display data, keep getting "argument 'mastercontroller' not function, got undefined." strange thing isolated code out of files , runs itself, moment put back, doesn't work anymore.
i want app load transactions data when "old baskets" menu item clicked. appreciated. it's driving me insane!!!
this html:
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>laundri</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <link rel="stylesheet" href="styles/app.css"/> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> <script> var module = angular.module('app', ['onsen']); </script> <script> var transactionsmodule = angular.module('transactions', ['onsen']); </script> <script> ons.ready(function() { }); </script> <style> .page--menu-page__background { background-color: #333; } .page--menu-page__content { color: white; } .menu-close, .menu-close > .toolbar-button { color: #999; } .menu-list, .menu-item:first-child, .menu-item:last-child, .menu-item { background-color: transparent; background-image: none !important; border-color: transparent; color: #fff; } .menu-item { padding: 0 0 0 20px; line-height: 52px; height: 52px; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px; } .menu-item:active { background-color: rgba(255, 255, 255, 0.1); } .menu-notification { display: inline-block; margin-top: 12px; font-size: 14px; height: 16px; line-height: 16px; min-width: 16px; font-weight: 600; } .bottom-menu-list, .bottom-menu-item:first-child, .bottom-menu-item:last-child, .bottom-menu-item { border-color: #393939; background-color: transparent; background-image: none !important; color: #ccc; } .bottom-menu-item:active { background-color: rgba(255, 255, 255, 0.1); } </style> </head> <body> <!-- sliding menu --> <ons-sliding-menu menu-page="menu.html" main-page="home.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true"> </ons-sliding-menu> <ons-template id="menu.html"> <ons-page modifier="menu-page"> <ons-toolbar modifier="transparent"></ons-toolbar> <ons-list class="menu-list"> <ons-list-item class="menu-item" ng-click="menu.setmainpage('home.html', {closemenu: true})"> <ons-icon icon="fa-home"></ons-icon> home </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setmainpage('newbasket.html', {closemenu: true})"> <ons-icon icon="fa-plus"></ons-icon> new laundry basket </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setmainpage('oldbasket.html', {closemenu: true})"> <ons-icon icon="fa-history"></ons-icon> old baskets <div class="notification menu-notification">3</div> </ons-list-item> </ons-list> <br> <ons-list class="bottom-menu-list"> <ons-list-item class="bottom-menu-item" ng-click="menu.setmainpage('page3.html', {closemenu: true})"> settings </ons-list-item> <ons-list-item class="bottom-menu-item" ng-click="menu.setmainpage('page4.html', {closemenu: true})"> </ons-list-item> <ons-list-item class="bottom-menu-item" ng-click="menu.setmainpage('page5.html', {closemenu: true})"> send feedback </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">home</div> </ons-toolbar> <ons-row style="margin-top: 100px;"> <ons-col align="center"> <i style="font-size: 10em;" class="ion-tshirt-outline"></i> </ons-col> </ons-row> </ons-page> </ons-template> <ons-template id="newbasket.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center"> new laundry basket </div> </ons-toolbar> <div ng-app="store" ng-controller="storecontroller store"> <ons-row style="margin-top: 100px; margin-bottom: 100px;"> <ons-row style="margin-bottom: 4em;"> <ons-col align="left" width="10%"> <button class="button button--outline" style="position: absolute; left: 10px; height: 235px;" ng-click="count = count + 1" ng-init="count=0">↑</button> </ons-col> <ons-col align="center" width="80%"> <img style="max-width:200px;" class="item_image" ng-src="{{store.currentproduct.images}}"/> </ons-col> <ons-col align="right" width="10%"> <button class="button button--outline" style="position: absolute; right: 10px; height: 235px;" ng-click="count = count - 1" ng-init="count=0">↓</button> </ons-col> </ons-row> <ons-row style="margin-bottom:20px;"> <ons-col align="center"> <center><input type="number" class="text-input" min="0" max="100" value="{{count}}" style="text-align: center;"></input><center> </ons-col> </ons-row> <ons-row style="margin-top:2em;"> <ons-col align="center"> <ons-button modifier="cta">add basket</ons-button> </ons-col> </ons-row> <ons-button modifier="outline" style="position: absolute;bottom: 10px;left: 10px;" ng-click="store.prevproduct()">back</ons-button> <ons-button modifier="outline" style="position: absolute;bottom: 10px;right: 10px;" ng-click="store.nextproduct()">next</ons-button> </ons-row> </div> </ons-page> </ons-template> <ons-template id="oldbasket.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-app="app" ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">old baskets</div> </ons-toolbar> <div ng-app="transactions"> <ons-list ng-controller="mastercontroller"> <ons-list-item modifier="chevron" class="item" ng-repeat="transaction in transactions"> <ons-row> <ons-col width="60px"> <div class="item-thum"></div> </ons-col> <ons-col> <header> <span class="item-title">{{transaction.title}}</span> <span class="item-label">{{transaction.label}}</span> </header> <p class="item-desc">{{transaction.desc}}</p> </ons-col> </ons-row> </ons-list-item> </ons-list> </div> </ons-page> </ons-template> <ons-template id="page3.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">settings</div> </ons-toolbar> <ons-row style="margin-top: 100px;"> <ons-col align="center"> <ul class="list"> <li class="list__item"> setting 1 <label class="switch switch--list-item"> <input type="checkbox" class="switch__input" checked> <div class="switch__toggle"></div> </label> </li> <li class="list__item"> setting 2 <label class="switch switch--list-item"> <input type="checkbox" class="switch__input"> <div class="switch__toggle"></div> </label> </li> <li class="list__item"> setting 3 <label class="switch switch--list-item"> <input type="checkbox" class="switch__input" checked> <div class="switch__toggle"></div> </label> </li> <li class="list__item"> setting 4 <label class="switch switch--list-item"> <input type="checkbox" class="switch__input"> <div class="switch__toggle"></div> </label> </li> </ul> </ons-col> </ons-row> </ons-page> </ons-template> <ons-template id="page4.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">help</div> </ons-toolbar> <ons-row style="margin-top: 100px;"> <ons-col align="center"> <ons-button modifier="light" ng-click="menu.togglemenu()"> me! </ons-button> </ons-col> </ons-row> </ons-page> </ons-template> <ons-template id="page5.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">feedback</div> </ons-toolbar> <ons-row style="margin-top: 100px;"> <ons-col align="center"> <ons-button modifier="light" ng-click="menu.togglemenu()"> waddayathink? </ons-button> </ons-col> </ons-row> </ons-page> </ons-template> </body> </html> and app.js:
(function() { app.controller('storecontroller', function(){ var productindex = 0; this.currentproduct = items[productindex]; this.nextproduct = function() { productindex = productindex+1; this.currentproduct = items[productindex]; }; this.prevproduct = function() { productindex = productindex-1; this.currentproduct = items[productindex]; }; }); var items = [ { item: 'top', number: 2, images: 'img/shirt_icon.jpeg', description: 't-shirts, undershirts, singlets, etc.' }, { item: 'bottom', number: 5, images: 'img/pants_icon.jpg', description: 'jeans, shorts, pants, etc.' }, { item: 'underwear', number: 3, images: 'img/underwear_icon.jpg', description: 'undies, g-strings, etc.' }, ]; var transactionsmodule = angular.module('transactions', ['onsen']); transactionsmodule.controller('mastercontroller', function($scope, $data) { $scope.transactions = $data.transactions; }); transactionsmodule.factory('$data', function() { var data = {}; data.transactions = [ { title: 'item 1 title', label: '4h', desc: 'lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.' }, { title: 'another item title', label: '6h', desc: 'ut enim ad minim veniam.' }, { title: 'yet item title', label: '1day ago', desc: 'duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' }, { title: 'yet item title', label: '1day ago', desc: 'duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' } ]; return data; }); })();
you called twice.
var transactionsmodule = angular.module('transactions', ['onsen']); one scripts tags , 1 in app.js. creates 2 instances of module. if want reference original 1 use syntax:
var transactionsmodule = angular.module('transactions');
Comments
Post a Comment