Fatal编程技术网
  • java/
  • Java Angularjs指令每$httpRequest刷新一次

Java Angularjs指令每$httpRequest刷新一次

java html angularjs

Java Angularjs指令每$httpRequest刷新一次,java,html,angularjs,angularjs-directive,Java,Html,Angularjs,Angularjs Directive,我正在使用带有SpringMVC模块的AngularJs。我正在从UI上传文件，并以表格格式在UI中显示文件。当我第一次上传时，它工作正常，但当我第二次上传时，我的代码不工作。如果我刷新页面并上传文件，它工作正常。请帮助我哪里出了问题。我需要上传文件多次没有页面刷新 JSP代码： <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

我正在使用带有SpringMVC模块的AngularJs。我正在从UI上传文件，并以表格格式在UI中显示文件。当我第一次上传时，它工作正常，但当我第二次上传时，我的代码不工作。如果我刷新页面并上传文件，它工作正常。请帮助我哪里出了问题。我需要上传文件多次没有页面刷新

JSP代码：

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Angular JS Custom Directives</title>
            <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app = "mainApp" ng-controller = "StudentController">

      <table width="100%" border="0" cellspacing="5" cellpadding="0" id="uploadFile">
   <tr>
            <td align="left" valign="middle">Upload File:</td><br/>
            <td align="left" valign="middle">
            <input name="file2" id="file2" type="file" file-model="file2"/><br/>
            </td>
             <td><input type="button" value="Submit" ng-click="uploadFormData();"></td>

          </tr>
          <tr>
    <td align="left" valign="middle">&nbsp;
    </td>
  </tr>
  </table>
  <table border="1" cellspacing="0" cellpadding="4">
     <tr ng-repeat="row in rows">
        <td ng-repeat="column in row.split(',')">{{column}}</td>
     </tr>
  </table>
     <mydirc></mydirc>
      </div>     




      <script>


         var mainApp = angular.module("mainApp", []);



         mainApp.controller('StudentController', function($scope,$http)
         {
             $scope.uploadFormData= function() 
            {
                var oMyForm = new FormData();
                    oMyForm.append("file",file2.files[0]);
                     $http({
                            method: 'POST',
                            url: 'uploadFile',
                            headers: {'Content-Type': undefined},
                            data: oMyForm,
                            transformRequest: function(response, headersGetterFunction) {
                            return response;                  
                        }
                 }).success(function(data, headers)
                    {   
                        $scope.rows=data.list;
                     });
             }; //end of click 

         }); 

      </script>

   </body>

</html>


自定义指令
AngularJS示例应用程序
上传文件：



{{column}}
var mainApp=angular.module（“mainApp”，[]）；
mainApp.controller（'StudentController'，函数（$scope，$http）
{
$scope.uploadFormData=函数（）
{
var myform=new FormData（）；
myform.append（“文件”，file2.files[0]）；
$http({
方法：“POST”，
url:“上传文件”，
标题：{'Content-Type'：未定义}，
资料来源：MYFORM，
transformRequest：函数（响应，HeaderGetterFunction）{
返回响应；
}
}).成功（功能（数据、标题）
{   
$scope.rows=data.list；
});
}；//单击结束
});
控制器：

@RequestMapping(value = "/uploadFile")
    public @ResponseBody void upLoadFile(HttpServletRequest request,HttpServletResponse response,
             @RequestParam(value = "file") MultipartFile file) {
        JSONObject object = new JSONObject();
        StringBuilder result=null;
        try 
        {
            System.out.println(file.getOriginalFilename());

            InputStream in=file.getInputStream();
            BufferedReader reader = new BufferedReader(new InputStreamReader(in));
            result = new StringBuilder();
            List<String> ite=new ArrayList<String>();
            object.put("list", ite);
            response.getWriter().write(object.toString());
        } catch (IOException e) {e.printStackTrace();
        } catch (JSONException e) {e.printStackTrace();
        }


    }

@RequestMapping（value=“/uploadFile”）
public@ResponseBody void上传文件（HttpServletRequest请求，HttpServletResponse响应，
@RequestParam（value=“file”）多部分文件{
JSONObject对象=新的JSONObject（）；
StringBuilder结果=null；
尝试
{
System.out.println（file.getOriginalFilename（））；
InputStream in=file.getInputStream（）；
BufferedReader reader=新的BufferedReader（新的InputStreamReader（in））；
结果=新的StringBuilder（）；
List ite=new ArrayList（）；
对象。放置（“列表”，ite）；
response.getWriter（）.write（object.toString（））；
}catch（ioe）{e.printStackTrace（）；
}catch（JSONException e）{e.printStackTrace（）；
}
}
根据您的代码，请查找指令的伪代码，该指令具有独立的作用域和处理文件上载的独立控制器

HTML的代码：

<div ng-app = "mainApp" ng-controller = "StudentController">
    <table width="100%" border="0" cellspacing="5" cellpadding="0" id="uploadFile">
        <tr>
            <td align="left" valign="middle">Upload File:</td><br/>
            <td align="left" valign="middle">
                <input name="file2" id="file2" type="file" file-model="file2"/><br/>
            </td>
            <td><input type="button" value="Submit" ng-click="uploadFormData();"></td>
        </tr>
        <tr>
            <td align="left" valign="middle">&nbsp;
            </td>
        </tr>
    </table>
    <list-files rows="fileList"></list-files>
</div>
希望这有助于解决问题。

为什么在指令中使用$httpRequest？我想创建一个用于重用目的的指令，以及我需要绑定到自定义指令的响应。我正在迭代数据并将其绑定到表。你想上载多个文件吗？是的，我需要上载多个文件我有相同的问题并解决了它。我把我的解决方案放在这里。嗨，Sarathy，你给我的密码对我不起作用。@Nav，它现在起作用了吗？你犯了什么错误？@Sarthya，我删除了自定义指令并创建了一个控制器。在控制器中，我调用了$http服务。我将其附加到范围中的响应。在html中，在模板部分给出的表标记。我试过了。这对我有用。非常感谢你。现在，我的代码可以动态加载任何类型的文件。很高兴它能工作。上传数据的代码应该在单独的控制器中，在该控制器中可以使用文件上传控件。如果需要一个指令来显示文件列表，那么可以使用来自上载控制器的隔离作用域来传递数据。@Sarathy，使用隔离作用域我们如何对同一逻辑使用自定义指令。以前我试着用它，但我没有得到它使用控制器，我得到了它 
angular.module("mainApp").directive('listFiles', function() {
    var template = '<table border="1" cellspacing="0" cellpadding="4">';
    template += '<tr ng-repeat="row in rows">';
    template += '<td ng-repeat="column in row.split(',')">{{column}}</td>';
    template += '</tr>';

    return {
        restrict: 'E',
        replace: true,
        template : template,    
        scope: {
            rows: '='
        }
    };
});

angular.module("mainApp").controller("StudentController", function($scope, $http){
    $scope.fileList = [];

    $scope.uploadFormData = function() {
        // Code to upload file.
        // Ex:
        $http(...).success(function(response){
             $scope.fileList = response.list;
        });
    };
});