Question

我是角度js的新手，我想要文件上传的进度条线。

当我运行我的代码时，我收到以下错误：

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)

这是我的代码：

<html ng-app="app">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script>
           var app = angular.module('myApp', ['angularFileUpload'])

            .controller('MyCtrl', ['$scope','$upload', function MyCtrl($upload) {
            // .controller("MyCtrl", function ($scope,$upload){
            // var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
                $scope.onFileSelect = function(files) {
                   var file = files[0];
                   $scope.upload = $upload.upload({
                   url: 'url',
                   method: 'POST', 
                   withCredentials: true, 
                   data: {type:'uploadzip'},
                   file: file, // or list of files ($files) for html5 only 
                 }).progress(function(evt) {
                   console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                   $scope.progressBar = parseInt(100.0 * evt.loaded / evt.total);
                 }).success(function(data, status, headers, config) {
                   console.log('upload succesfully...')
                 }).error(function(err) {
                   console.log(err.stack);
                 }) 
                }
            }]);

        </script>
    </head>
    <body >
       <div ng-controller="MyCtrl">
          <input type="file" ng-file-select="onFileSelect($files)" multiple>
          <div ng-scope='progressBar'>
          </div>
        </div>
    </body>
</html>

有人可以修改我需要更正的代码。

Answer 1

错误在ng-app指令上，您正在发送错误的模块名称。此外，您还没有在控制器上注入$scope。

变化：

<html ng-app="app">

到此：

<html ng-app="myApp">

Answer 2

在控制器声明中你有......

.controller('MyCtrl', ['$scope','$upload', function MyCtrl($upload) {

......你应该......

.controller('MyCtrl', ['$scope','$upload', function MyCtrl($scope, $upload) {

Answer 3

总之，您在此处有三个问题。你html需要引用myapp而不是app。它应该是：

<html ng-app="myApp">

您的html需要包含上传脚本。在你的HEAD你应该：

<script src="angular-file-upload.min.js"></script>

您的控制器应注入范围：

应该是：

.controller('MyCtrl', ['$scope','$upload', function MyCtrl($scope, $upload) {

因此，尝试使用以下内容替换您的代码和标记。

    <html ng-app="myApp">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="angular-file-upload.min.js"></script>
            <script>
               var app = angular.module('myApp', ['angularFileUpload'])

                .controller('MyCtrl', ['$scope','$upload', function MyCtrl($scope, $upload) {
                // .controller("MyCtrl", function ($scope,$upload){
                // var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
                    $scope.onFileSelect = function(files) {
                       var file = files[0];
                       $scope.upload = $upload.upload({
                       url: 'url',
                       method: 'POST', 
                       withCredentials: true, 
                       data: {type:'uploadzip'},
                       file: file, // or list of files ($files) for html5 only 
                     }).progress(function(evt) {
                       console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                       $scope.progressBar = parseInt(100.0 * evt.loaded / evt.total);
                     }).success(function(data, status, headers, config) {
                       console.log('upload succesfully...')
                     }).error(function(err) {
                       console.log(err.stack);
                     }) 
                    }
                }]);

            </script>
        </head>
        <body >
           <div ng-controller="MyCtrl">
              <input type="file" ng-file-select="onFileSelect($files)" multiple>
              <div ng-scope='progressBar'>
              </div>
            </div>
        </body>
    </html>

角度js中的模块错误

3 个答案: