файла загрузки в angularjs

Question

service.js:

MyEmployee.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function (file, uploadUrl) { 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: { 'Content-Type': undefined } 
     }) 
     .success(function() { 
     }) 
     .error(function() { 
     }); 
    } 
}]); 

controller.js:

MyEmployee.controller('EmployeeDetailController', ['$scope', 'fileUpload', function ($scope, fileUpload) { 

      $scope.uploadFile = function() { 
       var file = $scope.myFile; 
       console.log('file is ' + JSON.stringify(file)); 
       var uploadUrl = "~/Content/Photos"; 
       fileUpload.uploadFileToUrl(file, uploadUrl); 
      }; 

     }]); 

directive.js:

MyEmployee.directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]); 

индекс:

@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<section ng-controller="EmployeeDetailController" > 

    <alert type="success" close="closeAlert()" collapse="ShowAlert" data-dismiss="alert"> 
      Employee has been Added Successfully! 
    </alert> 

    <div style ="float:right;"> 
     <button class="btn btn-primary" ng-click="EditEmployeeShow = !EditEmployeeShow">Add New Employee</button> 
    </div> 

    <div style="clear: both;" collapse="EditEmployeeShow" > 
     @Html.Partial("_CreateNewEmployee") 
    </div> 
    <div style="clear: both;" data-ng-init="init()"> 
     @Html.Partial("_EmpdetList") 
    </div> 

</section> 

Модуль: 0

angular.module('MyEmployee', ['MyEmployee.controllers', 'MyEmployee.services', 'MyEmployee.directive', 'ngDialog']); 

CreateNewEmployee:

<h2>CreateNewEmployee</h2> 

<table class="table" style="width: 100%"> 
<tr> 
    <td style="text-align: left; width: 20%;"> 
      <label class="labelsytle"> 
      First Name 
     </label>   
    </td> 
    <td style="text-align: left;"> 
     <input class="form-control" name="search" ng-model="Empdet.FirstName" placeholder="Enter First Name" style="border-radius: 5px;" /> 
    </td> 
</tr> 
<tr> 
    <td style="text-align: left;"> 
     <label class="labelsytle"> 
      Last Name 
     </label>    
    </td> 
    <td style="text-align: left;"> 
     <input class="form-control" name="search" ng-model="Empdet.LastName" placeholder="Enter Last Name" style="border-radius: 5px;" /> 
    </td> 
</tr> 
<tr> 
    <td style="text-align: left;"> 
     <label class="labelsytle"> 
      Email 
     </label> 
    </td> 
    <td style="text-align: left;"> 
     <input class="form-control" name="search" ng-model="Empdet.Email" placeholder="Enter Email" style="border-radius: 5px;" /> 
    </td> 
</tr> 
<tr> 
    <td style="text-align: left;"> 
     <label class="labelsytle"> 
      PhotoFile 
     </label> 
    </td> 
    <td style="text-align: left;"> 
     <input class="form-control" type="file" file-model="PhotoFile" style="border-radius: 5px;"/> 
     <button ng-click="uploadFile()">Upload</button> 
    </td> 
</tr> 
<tr> 
    <td style="text-align: left;"> 
      <label class="labelsytle"> 
      PhotoText 
     </label> 
    </td> 
    <td style="text-align: left;"> 
     <input class="form-control" name="search" ng-model="Empdet.PhotoText" placeholder="Enter PhotoText" style="border-radius: 5px;" /> 
    </td> 
</tr> 
<tr> 
    <td style="text-align: left;"> 
      <label class="labelsytle"> 
      Age 
     </label> 
    </td> 
    <td style="text-align: left;"> 
     <input class="form-control" name="search" ng-model="Empdet.Age" placeholder="Enter Age" style="border-radius: 5px;" /> 
    </td> 
</tr> 

<tr style="display: block; text-align: center; width: 5%; margin: 0 auto;"> 
    <td style="text-align: left; width: 25px;" colspan="4"> 
     <button class="btn btn-primary" type="button" ng-click="SaveEmpdet(Empdet)" style="border-radius: 5px; font-family: Consolas;">SAVE</button></td> 

    <td style="text-align: left; width: 25px;"> 
     <button class="btn btn-primary" type="button" ng-click="Cancel()" style="border-radius: 5px; font-family: Consolas;">CANCEL</button></td> 
</tr> 


</table> 

Я не могу загрузить файл, когда я пытаюсь выполнить мое приложение I Я не могу выполнить список selectemployee, который я повесил, как это сообщение Ошибка: «сгенерирован для создания модуля MyEmployee.directive из-за: Ошибка: [$ injector: nomod] Модуль« MyEmployee.directive »недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента. http://errors.angularjs.org/1.3.3/ $ форсунка/nomod? P0 = MyEmployee.directive»

Answer 1

Вы определяете модуль MyEmployee с зависимостями на MyEmployee.controllers и MyEmployee.directives модулей, но модули MyEmployee.controllers и MyEmployee.directives являются не определен в коде snipets.

если переменная MyEmployee определяется как

var MyEmployee = angular.module('MyEmployee', ['MyEmployee.controllers', 'MyEmployee.services', 'MyEmployee.directive', 'ngDialog']); 

, то MyEmployee.directive('fileModel',... - это только определение директивы в модуле MyEmployee - MyEmployee.directive не определен (что говорит вам сообщение об угловой ошибке).

Если вы хотите определить модуль для каждого файла, используйте что-то подобное для директив.js (и аналогично для каждого файла/модуля).

angular.module('MyEmployee.directive', []) 
    .directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]);