2016-08-01 52 views
0

NG-文件上傳具有注射錯誤

<!DOCTYPE html> 
<html ng-app ="dashboard"> 
<head> 
    <title></title> 
    <script src="angular.min.js"></script> 
     <script src="angular-ui-router.js"></script> 
</head> 

<body> 
    <div class="box-content"> 
     <form ng-controller="mycontroller as up" name="up.upload_form"> 
      <table cellspacing="10" cellpadding="10" style="margin-left: 5%; cellspacing= 7;"> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Name</label></td> 
        <td> 
         <input type="text" name="coursename" ng-model=" up.coursename" placeholder="Enter course name here" class="form-control"> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Code</label></td> 
        <td><input type="text" name="coursecode" ng-model=" up.coursecode" placeholder="Enter course code here" class="form-control"></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Title</label></td> 
        <td><input type="text" name="coursetitle" ng-model=" up.coursetitle" placeholder="Enter course title here" class="form-control"></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Authur</label></td> 
        <td> <input type="text" name="courseauthor" ng-model=" up.courseauthor" placeholder="Enter author name here" class="form-control"></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Discription</label></td> 
        <td><textarea name="coursediscription" ng-model=" up.coursediscription" placeholder="Enter course description here"></textarea></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course urlpath</label></td> 
        <td> <input type="text" name="courseurlpath" ng-model=" up.courseurlpath" placeholder="Enter course url path here" class="form-control"></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Start Date</label></td> 
        <td> <input type="date" name="coursestartingdate" ng-model=" up.coursestartingdate" placeholder="start" class="form-control"></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course End Date</label></td> 
        <td><input type="date" name="courseendingdate" ng-model=" up.courseendingdate" placeholder="end" class="form-control"></td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Attachments</label></td> 
        <td><input type="file" ngf-select ng-model="up.file" name="file" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control"> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label class="control-label" for="inputSuccess1">Course Video</label></td> 
        <td><input type="file" ngf-select ng-model="up.file1" name="file1" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control"> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'" /> 
        </td> 
        <td> 

         <i ng-show="up.upload_form.file.$error.required">*required</i><br> 
         <i ng-show="up.upload_form.file.$error.maxSize">File too large 
                   {{up.file.size/1000000|number:1}}MB: max 20M</i> 
        </td> 
       </tr> 
       <tr> 
        <td> 

         <button type="submit" ng-click="up.submit()" class="btn btn-success">submit</button> 
         <p>{{up.progress}}</p> 
     </form> 
     </td> 
     </tr> 
     <br> 
     </table> 
     </form> 
    </div> 
</body> 

<script type="text/javascript"> 
    //var dashboard = angular.module('dashboard', ['Upload','$window''ngRoute']); 
    var dashboard = angular.module('dashboard', ['ui.router','Upload','$window']); 
    dashboard.controller('mycontroller',['Upload', '$window',function($scope,Upload, $window){ 
    var vm = this; 
     vm.submit = function() { 
     alert("HAi") 
      //function to call on form submit 
     /* if (vm.upload_form.file.$valid && vm.file) {*/ 
       //check if from is valid 
       /*vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function*/ 
     // } 
     } 



    }]); 












/*  dashboard.controller('MyCtrl', ['Upload', '$window', function(Upload, $window) { 
     var vm = this; 
     vm.submit = function() { 
      //function to call on form submit 
      if (vm.upload_form.file.$valid && vm.file) { 
       //check if from is valid 
       vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function 
      } 
     } 
     vm.upload = function(file, file1, coursename, coursecode, coursetitle, courseauthor, coursediscription, courseurlpath, coursestartingdate, courseendingdate) { 
      alert("success"); 

      Upload.upload({ 

       url: 'http://192.168.1.16:8080/courseapi/create', //webAPI exposed to upload the file 
       data: { 
        file: file, 
        file1: file1, 
        coursename: coursename, 
        coursecode: coursecode, 
        coursetitle: coursetitle, 
        courseauthor: courseauthor, 
        coursediscription: coursediscription, 
        courseurlpath: courseurlpath, 
        coursestartingdate: coursestartingdate, 
        courseendingdate: courseendingdate 
       } //pass file as data, should be user ng-model 
      }).then(function(resp) { 
       console.log("Upload file::::" + JSON.stringify(resp)); 

       //upload function returns a promise 
       if (resp.data.success === true) { 
        //validate success 
        $window.alert(resp.config.data.file.name + ' Successfully uploaded.'); 
       } else { 
        $window.alert('an error occured'); 
       } 
      }, function(resp) { 
       //catch error 
       console.log('Error status: ' + resp.status); 
       $window.alert('Error status: ' + resp.status); 
      }, function(evt) { 
       console.log(evt); 
       var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
       console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
       vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress 
      }); 
     }; 
    }]);*/ 
</script> 

</html> 

無法擊中angularjs控制器 錯誤堆棧:angular.min.js:6未被捕獲的錯誤: [$ injector:modulerr] http://errors.angularjs.org/1.2.3/ $ injector/modulerr?p0 =儀表板& p1 =錯誤%... 0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%2Fangular.min.js%3A28 %3A374)

+0

請正確鏈接的網址爲更好的理解。 –

+0

你的意思是錯誤堆棧? – luee

+0

是的。錯誤的網址。 –

回答

1

您不必注入$ window並上傳到模塊,除非他們是angualr模塊,

所以它應該是,

var dashboard = angular.module('dashboard', ['ui.router']); 

你是不是注射$範圍的功能,改變你的控制器是這樣,

dashboard.controller('mycontroller',['$scope','$window', 'Upload',function($scope,$window, Upload){ 
    }]); 
+0

建議:首先注入角度模塊(即以$開頭)和自定義 –

+0

我試過但同樣的錯誤發現angular.min.js:未捕獲錯誤:[$ injector:modulerr] – luee

+0

當我添加上傳在我的控制器顯示此錯誤angular.min.js:84Error:[$ injector:unpr] http: //errors.angularjs.org/1.2.3/$injector/unpr?p0=UploadProvider%20%3C-%20Upload – luee

相關問題