Javascript 如何将此代码集成到我的AngularJS应用程序中？_Javascript_Angularjs_Controller_Integration

Javascript 如何将此代码集成到我的AngularJS应用程序中？

javascript angularjs

Javascript 如何将此代码集成到我的AngularJS应用程序中？,javascript,angularjs,controller,integration,Javascript,Angularjs,Controller,Integration,我正在学习AngularJS，同时构建一个小应用程序，将其用作核心库，以及用于引导插件的jQuery 我修改了网上的一些例子，以满足我的需要。现在它正在读取客户端文本文件并显示其内容。代码如下：现在，我想将它集成到我现有的Angular应用程序中，以读取一些数据，而不是使用伪JSON对象，但该应用程序的结构有点不同，我不知道如何将其组合在一起以下是我的HTML中的相关片段： <html ng-app="DrillApp"> <head> <

我正在学习AngularJS，同时构建一个小应用程序，将其用作核心库，以及用于引导插件的jQuery

我修改了网上的一些例子，以满足我的需要。现在它正在读取客户端文本文件并显示其内容。代码如下：

现在，我想将它集成到我现有的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>

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和引导插件被注释掉的情况下：

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

我怀疑错误消息的不同并不重要

虽然我相信我了解自己的代码中发生了什么，以及所有内容是如何链接在一起的，但我不了解示例是如何工作的，因此我无法正确地集成它

首先，我试图通过计算示例中发生了什么来学习Angular，但是我遇到了一些困难，所以我选择了。它使用了稍微不同的方法，我更喜欢这种方法，因为它是显式的（应该在这里应用，对吗？）所有控制器的东西。首先我在中定义它，然后别名它并使用它，很简单

演示使用了不清楚的语法。控制器被定义为一个具有适当名称的函数，然后在没有别名的情况下使用。我假设Angular在幕后发挥了神奇的作用，并发现

UploadController

函数包含UploadController的逻辑

我的问题是：

显式

.controller（…）

语法和使用函数名的“hocus pocus”语法之间是否存在功能上的差异？在它们之间切换会影响Angular的逻辑吗

当使用我首选的

.controller（）

语法时，我可以使用

此

来更改范围。在另一种语法中，作用域是通过参数显式提供的，同时还有一个fileReader实例（通过名称神奇地注入）。如果我简单地用

this

关键字替换对

scope

的所有引用，并像这样插入fileReader，可以吗

.controller('DrillController', ['fileReader', function(fileReader) { //...

是什么导致了这个错误？看起来该指令的上下文与我的控制器的上下文不同。为什么它在演示中有效，但在我的应用程序中无效？它是由使用显式控制器语法引起的吗

好的，你遇到的问题就在这里

var getTextFile = function () {
            fileReader.readAsText(this.selectedFile, this).then(function(result) {
                this.text = result;
            });
        };

你应该做什么

 $scope.getTextFile = function () {
                fileReader.readAsText(this.selectedFile, this).then(function(result) {
                    this.text = result;
                });
            };

如果要使用原始作用域中的getTextFile。否则，您将创建一个名为getTextFile的变量，该变量在初始化之外将无法访问

要解释您的错误：

scope.getTextFile();

该代码正在范围对象上查找getTextFile变量。这是未定义的。因为它是未定义的，所以不能像函数一样调用它

此外，控制器需要接受$scope变量，并且需要在$scope上设置所需的内容，而不是这个

.controller('DrillController', function($scope) {
$scope.GetText = function(){};
})

你提出的两种解决方案我都试过了，但都没用。它不只是普通的链接吗，每个方法都返回对象吗？用

.module（）

和

.controller（）

返回的对象稍后调用可能与

.controller（）

返回的对象相同，否则后一种解决方案将无法工作。您的右侧是正常链接，您的代码只是在进行一个组合，我想这会引发一个循环。但我知道你现在的问题在哪里，我会编辑我的回复。这就是问题所在，谢谢。我已经为

$scope

和

fileReader

添加了注射剂，并将代码修改为使用

$scope

而不是

这个

，现在一切都很好。如果有人感兴趣，这里感谢@Delta的回答。

.controller('DrillController', function($scope) {
$scope.GetText = function(){};
})