我正在學習AngularJS，同時構建一個小應用程序，它將它用作核心庫，以及用於Bootstrap插件的jQuery。如何將此代碼整合到我的AngularJS應用程序中？
我修改了一些在網上找到的例子來滿足我的需求。現在它正在讀取客戶端文本文件並顯示其內容。這裏是代碼：http://plnkr.co/edit/qBVHM6?p=preview
現在，我想將它集成到我現有的Angular應用程序中，以讀取一些數據而不是使用虛擬JSON對象，但應用程序的結構有點不同，我不知道如何把它在一起。
下面是從我的HTML的相關片段：
<html ng-app="DrillApp">
<head>
<!-- jQuery + Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="res/controller.js"></script> <!-- my main controller -->
<script src="res/localfile.js"></script> <!-- code from upload.js in Plunker demo -->
</head>
<body ng-controller="DrillController as drill">
<input type="file" id="dbSelector" read-text="onFileSelect($files)">
<p>{{drill.text}}</p>
</body>
</html>
這裏的controller.js：
(function() {
var app = angular.module('DrillApp', []).controller('DrillController', function() {
this.isSupported = window.File && window.FileList && window.FileReader;
this.questions = [
/* list of dummy data which should be parsed from text files instead */
];
/* ... some app logic removed for clarity ... */
// function copied from app.js in Plunker demo hoping it would Just Work (tm)
var getTextFile = function() {
fileReader.readAsText(this.selectedFile, this).then(function(result) {
this.text = result;
});
};
});
app.directive('readText', function() {
return {
link: function(scope, element) {
element.bind('change', function(e) {
scope.selectedFile = (e.srcElement || e.target).files[0];
scope.getTextFile();
});
}
};
});
})();
localfile.js距離Plunker改名upload.js。
在選擇文件後，下面的錯誤運行該應用程序的結果：
Uncaught TypeError: undefined is not a function | controller.js:26
(anonymous function) | controller.js:26
m.event.dispatch | jquery.min.js:3
r.handle | jquery.min.js:3
或使用jQuery和Bootstrap插件註釋掉：
Uncaught TypeError: undefined is not a function | controller.js:26
(anonymous function) | controller.js:26
(anonymous function) | angular.js:2816
q | angular.js:320
c | angular.js:2815
我懷疑在錯誤信息的差異並不重要。
雖然我相信我理解我自己的代碼中發生了什麼以及如何將所有內容鏈接在一起，但我不明白該示例如何工作 - 因此我無法正確整合它。
首先，我試圖通過計算AngularJS website的例子中發生的事情來學習Angular，但我遇到了一些困難，所以我拿了CodeSchool course。它使用的是稍微不同的方法，我更喜歡它，因爲它是明確的（PEP 20應該適用於此，對吧？）與所有控制器的東西。首先我將它定義，然後將其用於別名並使用它，很簡單。
該演示使用了不清晰的語法。控制器被定義爲具有適當名稱的功能，然後使用時不會出現鋸齒現象。我認爲Angular在幕後發揮了它的魔力，並且認爲UploadController函數包含了UploadController的邏輯。
我的問題是：
是否有明確的
.controller(...)語法和「戲法」語法使用函數名之間的功能差異？他們之間的切換會影響Angular的邏輯嗎？當使用我的首選
.controller()語法時，我可以使用this來更改範圍。在替代語法中，作用域是通過參數顯式提供的，以及fileReader的實例（通過名稱神奇地注入？Related question）。它是很好，如果我只是用this關鍵字替換到scope所有引用和注入的FileReader是這樣的：.controller('DrillController', ['fileReader', function(fileReader) { //...是什麼原因導致這個錯誤？它看起來像指令沒有得到我的控制器所做的相同的上下文。爲什麼它在演示中工作，但不在我的應用程序中？是否使用顯式控制器語法引起的？
這是一個[工作示例]（http://plnkr.co/edit/AQC80e）感謝@ Delta的回答，如果任何人有興趣的話。 – gronostaj