AngularJs：TypeError：無法讀取未定義的屬性“控制器”

Question

我將遵循官方的角度教程，特別是在第4步中，在該步驟中我試圖重新組織文件，以便與功能相關的代碼位於單獨的模塊中，如https://docs.angularjs.org/tutorial/step_04中所述。

當我在trip-list / trip-list.module.js中定義一個組件時，它可以工作，但是如果我將定義移到一個名為trip-list / trip-list.component.js的單獨文件中，則會在兩個Chrome瀏覽器中引發以下錯誤和IE 9。

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module carpoolApp due to: 
Error: [$injector:modulerr] Failed to instantiate module tripList due to: 
TypeError: Cannot read property 'controller' of undefined

相關代碼段：

HTML代碼

 <!DOCTYPE html> <html ng-app="carpoolApp"> <head> <title>Isha Carpool App</title> </head> <body> <header> </header> <section> <greet-user></greet-user> <!-- this works --> <trip-list></trip-list> <!-- this works only if I define the component in trip-list.module.js. Doesn't work if I put it in a separate file and include it after loading trip-list.module.js as mentioned below --> </section> <footer> </footer> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> <script src="app.module.js"></script> <script src="trip-list/trip-list.module.js"></script> <script src="trip-list/trip-list.component.js"></script> </body> </html>

JavaScript：app.module.js

 var carpoolApp = angular.module('carpoolApp', [ 'tripList' ]); carpoolApp.component('greetUser', { template: 'Hello, {{$ctrl.user}}!', controller: function GreetUserController() { this.user = 'world'; } });

Javascript-trip-list / trip-list.module.js

 angular.module('tripList', []);

Javascript：trip-list / trip-list.component.js

 'use strict'; // this prints a valid object console.log('tripList module in component', angular.module('tripList')); angular. module('tripList'). component('tripList', { templateUrl: 'trip-list/trip-list.template.html', controller: function TripListController() { this.trips = [ { from: 'BNA', to: 'iii', departureDateAndTime: new Date() }, { from: 'iii', to: 'BNA', departureDateAndTime: new Date() } ]; } }); // this too prints a valid object console.log("tripList component registered", angular.module('tripList').component('tripList'));

Answer 1

嘗試發送有效且無效的git PR時，我無意間使其生效。 原來的問題是index.html文件沒有正確的EOL（它是dos格式）。 您可能會在下面的差異中看到^ M的變化。 無法計算我在此上浪費了多少小時！

diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index fd50422..86d0666 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -23,8 +23,9 @@
 <script src="trip-list/trip-list.module.js"></script>
 <!--
 TODO: This doesn't work :(
-<script src="trip-list/trip-list.component.js"></script>
 -->
+<script src="trip-list/trip-list.component.js"></script>^M
+^M

</body>
</html>

Answer 2

您必須使用以下角度模塊tripList的 setter

'use strict';

// this prints a valid object
console.log('tripList module in component', angular.module('tripList'));

angular.
  //modified the below line
  module('tripList',[ ]).
  component('tripList', {
    templateUrl: 'trip-list/trip-list.template.html',
    controller: function TripListController() {
        this.trips = [
            {
                from: 'BNA',
                to: 'iii',
                departureDateAndTime: new Date()
            },
            {
                from: 'iii',
                to: 'BNA',
                departureDateAndTime: new Date()
            }
        ];
    }
});

// this too prints a valid object
console.log("tripList component registered", angular.module('tripList').component('tripList'));

AngularJs：TypeError：無法讀取未定義的屬性“控制器”

問題描述

2 個解決方案

解決方案1
0 已采納 2017-01-01 21:06:59

解決方案2
-1 2017-01-01 19:46:20

AngularJs：TypeError：無法讀取未定義的屬性“控制器”

問題描述

2 個解決方案

解決方案1 0 已采納 2017-01-01 21:06:59

解決方案2 -1 2017-01-01 19:46:20

解決方案1
0 已采納 2017-01-01 21:06:59

解決方案2
-1 2017-01-01 19:46:20