Question

我提前道歉，如果这是一个像分号一样愚蠢的东西，但我很难获得角度以识别我的控制器（我是角色的新手）。

我收到错误，图像控制器未定义。

注意：我使用的是角度文件上传插件，这是一个web api 2.0应用程序。

我有2个Javascript文件UniqueAPIStart，UniqueAPIImages

UniqueAPIStart（固定）：

var UniqueAPI = angular.module('UniqueAPI', ['angularFileUpload']);

UniqueAPIImages（固定）：

UniqueAPI.controller('ImageController', ['$scope', '$upload', function ($scope, $upload) {
    $scope.$watch('myFiles', function() {
        for (var i = 0; i < $scope.myFiles.length; i++) {
            var file = $scope.myFiles[i];
            $scope.upload = $upload.upload({
                url: '/api/AdminImages', // upload.php script, node.js route, or servlet url
                //method: 'POST' or 'PUT',
                //headers: {'Authorization': 'xxx'}, // only for html5
                //withCredentials: true,
                data: { myObj: $scope.myModelObj },
                file: file, // single file or a list of files. list is only for html5
                //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
                //fileFormDataName: myFile, // file formData name ('Content-Disposition'), server side request form name
                // could be a list of names for multiple files (html5). Default is 'file'
                //formDataAppender: function(formData, key, val){}  // customize how data is added to the formData. 
                // See #40#issuecomment-28612000 for sample code

            }).progress(function(evt) {
                console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :' + evt.config.file.name);
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
                alert('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
            }).error(function (data, status) {
                alert(data.error);
            });
    //.then(success, error, progress); // returns a promise that does NOT have progress/abort/xhr functions
    //.xhr(function(xhr){xhr.upload.addEventListener(...)}) // access or attach event listeners to 
    //the underlying XMLHttpRequest
}
        /* alternative way of uploading, send the file binary with the file's content-type.
           Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. 
           It could also be used to monitor the progress of a normal http post/put request. 
           Note that the whole file will be loaded in browser first so large files could crash the browser.
           You should verify the file size before uploading with $upload.http().
        */
        // $scope.upload = $upload.http({...})  // See 88#issuecomment-31366487 for sample code.

    });
}]);

然后是我的cshtml：

@section scripts
{
    <script type="text/javascript" src ="/Scripts/API/ImageController.js"></script>
}

<div class="container" ng-app="UniqueAPI">
    <div class="row">
        <div class="col-md-4" ng-controller="ImageController">
            <form action="javascript:void(0);">
                <div class="form-group">
                    <label for="imgDescription">Email address</label>
                    <input type="text" class="form-control" id="imgDescription" placeholder="Image Description">
                    <button ng-file-select ng-model="files" multiple="true">Attach Any File</button>
                    <div ng-file-drop ng-model="files" class="drop-box"
                         drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}"
                         multiple="true" allow-dir="true" accept="image/*">
                        Drop Images here
                    </div>

                </div>
            </form>
        </div>

    </div>
</div>

LayoutFile：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

    <script type="text/javascript" src="~/Scripts/angular-file-upload-all.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-file-upload-shim.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-file-upload.js"></script>
    <script type="text/javascript" src="~/Scripts/API/UniqueAPIStart.js"></script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

首先，我看不到您导入所需的库：

<script src="https://angular-file-upload.appspot.com/js/angular-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>

和。您正在创建模块两次：

var UniqueAPI = angular.module('UniqueAPI', []);
angular.module('UniqueAPI', ['angularFileUpload']);

它应该是这样的

var UniqueAPI = angular.module('UniqueAPI', ['angularFileUpload']);

Angular js无法识别控制器

1 个答案: