参数'MasterController'是不是一个函数，得到了undefined

我试图让我的应用程序中的一个页面显示一些数据，但我不断收到“参数'MasterController'不是一个函数，得到了未定义。奇怪的是，我将代码从文件中分离出来，并且它本身完美运行，但是当我把它放回原处时，它就不再起作用了。参数'MasterController'是不是一个函数，得到了undefined

我只是希望应用程序在单击“旧篮子”菜单项时加载交易数据。任何帮助将不胜感激。这让我疯狂！

这是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})"> 
      Help 
     </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 as 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">&uarr;</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">&darr;</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 to 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()"> 
      HELP 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>

这是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 do eiusmod tempor incididunt ut labore et dolore magna aliqua.' 
      }, 
      { 
       title: 'Another Item Title', 
       label: '6h', 
       desc: 'Ut enim ad minim veniam.' 
      }, 
      { 
       title: 'Yet Another Item Title', 
       label: '1day ago', 
       desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' 
      }, 
      { 
       title: 'Yet Another Item Title', 
       label: '1day ago', 
       desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' 
      } 
     ]; 

     return data; 
    }); 

})();

来源

2014-12-06 GeeJay

你叫这个的两倍。

var transactionsmodule = angular.module('transactions', ['onsen']);

一个来自脚本标记，另一个来自app.js. 这会创建模块的两个实例。如果你想获得参考原来使用的语法：

var transactionsmodule = angular.module('transactions');

来源

2014-12-06 06:46:37 gsalisi

嗯，我删除了实例的脚本标记内，但是问题仍然存在 - 在oldbasket.html页面加载，但它是空白具有相同“参数'MasterController'不是一个函数，有未定义的”问题。 – GeeJay 2014-12-06 06:56:37

难以指出问题的原因是因为您没有按照您声明几乎所有内容的方式遵循最佳做法。我建议去angularjs指南，并按照每步一步。无论如何，我只是发现你多次宣布ng-app。如果你想使用另一个模块，只需将它作为依赖添加到你的主要ng-app。 – gsalisi 2014-12-06 15:29:33

参数'MasterController'是不是一个函数，得到了undefined

回答

相关问题