參數'customerCtrl'不是一個nNaNunction，沒有定義

我收到一個奇怪的錯誤，似乎暗示我的控制器沒有正確創建。誰能解釋一下？這是我第一個SPA應用程序，所以我在黑暗中編程一點點。參數'customerCtrl'不是一個nNaNunction，沒有定義

這是我的母版頁：

<!DOCTYPE html> 
<html ng-app="ibosApp"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>iBOS</title> 
    <script src="/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="/Scripts/angular.min.js"></script> 
    <script src="/Scripts/angular-route.min.js"></script> 
    <script src="/Scripts/bootstrap-select.js"></script> 
    <script src="/angular/scripts/route-config.js"></script> 
    <script src="/Scripts/bootstrap-select.js"></script> 
    <link href="/Content/bootstrap.min.css" rel="stylesheet" /> 
    <link href="/Content/bootstrap-select.css" rel="stylesheet" /> 
    <link href="/Content/acs.css" rel="stylesheet"/> 
    <script type="text/javascript"> 
     $(function() { 
      $('.selectpicker').selectpicker(); 
     }); 
    </script> 

</head> 
<body> 
    <div class="container body-content"> 
     <ng-view/> 
    </div> 
</body> 
</html>

這裏是我的視圖模板：

<div class="tab-content"> 
    <div id="customers" class="tab-pane fade active in top-buffer" ng-controller="customerCtrl"> 
     <form class="form-group"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-3"> 
         <label for="customer-broker">Broker:</label> 
         <select class="selectpicker" id="customer-broker"></select> 
        </div> 
        <div class="col-sm-3"> 
         <label for="customer-town">Town:</label> 
         <input type="text" class="form-control" id="customer-town"/> 
        </div> 
        <div class="col-sm-3"> 
         <label for="customer-code">Code:</label> 
         <input type="text" class="form-control" id="customer-code"/> 
        </div> 
        <div class="col-sm-3"> 
         <button ng-click="search()" class="btn">Search</button> 
         <button ng-click="myCustomers()" class="btn">My customers</button> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-3"> 
         <label for="customer-company-name">Company name:</label> 
         <input type="text" class="form-control" id="customer-company-name"/> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-3"> 
         <label for="customer-contact-name">Contact name:</label> 
         <input type="text" class="form-control" id="customer-contact-name"/> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-3"> 
         <label for="customer-customer-id">Customer ID:</label> 
         <input type="text" class="form-control" id="customer-customer-id"/> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

<script type="text/javascript"> 
    angular.module('ibosApp', ['angular-bootstrap-select', 'ngRoute']) 
     .controller("customerCtrl", function($scope, $http) { 
       $scope.loadBrokers = function() { 
        $http.get("/api/customers/getBrokers").success(function(data) { 
         $scope.brokers = data; 
        }); 
       } 

       $scope.loadBrokers(); 
      } 
    ); 
</script>

，但我得到的錯誤「參數‘customerCtrl’不是aNaNunction，得到了不確定」和控制器構造函數永遠不會被調用。誰能解釋爲什麼？

中號

編輯 - 更多的代碼

這裏是我的路由配置...

angular.module("ibosApp", ["ngRoute"]) 
    .config(function($routeProvider) { 
     $routeProvider.otherwise({ 
      templateUrl: "/angular/components/booking-system/booking-system-template.html" 
     }); 
    });

編輯 - 錯誤

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/ $injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js%3A17%3A381)

來源

2015-04-08 serlingpa

這將是很好看的.controller（ – maurycy

，我認爲你缺少匹配的「）」 –

他們的應用程序和CTRL定義 – serlingpa

有幾件事情是錯誤的。

你設置ibosApp兩次，即angular.module("ibosApp", ["ngRoute"])和angular.module("ibosApp", ['angular-bootstrap-select'])

您應該只做這一次，所有的依賴關係：

angular.module("ibosApp", ['ngRoute', 'angular-bootstrap-select']);

...和然後使用getter語法，該語法相同，但不使用第二個參數：

angular.module('ibosApp')

像你這樣做，除非你重新編譯應用程序的角度，您不能定義視圖控制器。最好將你的javascript放到一個單獨的文件中，並在你的索引頁上包含該腳本。這是不工作的原因是因爲你的角度應用程序編譯一次，然後你加載視圖和定義控制器，但角度不知道該控制，因爲它編譯它時不在那裏。

所以：

app.js

angular.module("ibosApp", ["ngRoute", "angular-bootstrap-select"]) 
.config(function($routeProvider) { 
    $routeProvider.otherwise({ 
     templateUrl: "/angular/components/booking-system/booking-system-template.html" 
    }); 
});

customerCtrl。JS

angular.module('ibosApp').controller("customerCtrl", function($scope, $http) { 
      $scope.loadBrokers = function() { 
       $http.get("/api/customers/getBrokers").success(function(data) { 
        $scope.brokers = data; 
       }); 
      } 

      $scope.loadBrokers(); 
     } 
);

而且您的標記將

// previous script tags 
<script src="app.js"></script> 
<script src="customerCtrl.js"></script>

來源

2015-04-08 13:30:35 Tom

感謝您的廣泛答覆湯姆。我完全按照你的建議，但現在我得到[不同的錯誤]（http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=ibosApp&p1=Error%3...20d%20（http ％3A％2F％2Flocalhost％3A4685％2FScripts％2Fangular.min.js％3A17％3A381）） – serlingpa

您可以粘貼完整的堆棧跟蹤 – Tom

上述問題的全堆棧跟蹤 – serlingpa

的全堆棧跟蹤是你的mod ule只在模板中定義？如果這可能是您的問題，則應用程序不會被初始化，因爲ng-app無法找到您要加載的模塊。我將從分離JavaScript和HTML開始，讓自己更輕鬆。

來源

2015-04-08 13:26:42 hochas

之上添加了$ routeProviders代碼感謝hochas，我已經實現了它，就像Tom建議的那樣（下文）。 – serlingpa

參數'customerCtrl'不是一個nNaNunction，沒有定義

回答

相關問題