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>

当我尝试执行我的应用程序时，我无法上传我的文件我无法执行selectemployee列表我被绞死了这样的帖子错误：“由于以下原因导致实例化模块MyEmployee.directive：错误：[$ injector：nomod]模块'MyEmployee.directive'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.3.3/ $ injector / nomod？p0 = MyEmployee.directive“

screenshot of my error application

Answer 1

您可以使用MyEmployee.controllers和MyEmployee.directives模块定义模块 MyEmployee ，但模块MyEmployee.controllers和MyEmployee.directives未在您的代码snipets中定义。

如果变量MyEmployee定义为

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

然后MyEmployee.directive('fileModel',...只是模块MyEmployee中的指令定义 - 未定义MyEmployee.directive（告诉您角度错误消息）。

如果你想为每个文件定义模块，请对directives.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]);
            });
        });
    }
};
}]);

angularjs中的文件上传错误

1 个答案: