인수 'MasterController'는 정의되지 않은 함수입니다.

내 응용 프로그램에서 내 페이지 중 하나에 일부 데이터를 표시하려고하는데 "Argument 'MasterController'가 정의되지 않았습니다." 이상한 점은 파일에서 코드를 분리하고 완벽하게 실행된다는 것입니다.하지만 다시 돌려 놓는 순간 더 이상 작동하지 않습니다.인수 'MasterController'는 정의되지 않은 함수입니다.

"올드 바스켓"메뉴 항목을 클릭하면 앱이 거래 데이터를로드하기 만하면됩니다. 도움을 주시면 대단히 감사하겠습니다. 그것은 나에게 정신 나간 운전이야!

이

는 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

문제를 지적하기 어려운 이유는 거의 모든 것을 선언하는 방식에서 모범 사례를 따르지 않기 때문입니다. 나는 angularjs 가이드로 가서 단계별로 단계를 따르는 것이 좋습니다. 어쨌든 당신은 ng-app를 여러 번 선언했다고 알았습니다. 다른 모듈을 사용하려면 기본 ng-app에 종속성으로 추가하십시오. – gsalisi

인수 'MasterController'는 정의되지 않은 함수입니다.

답변

관련 문제