Question

使用ngRoute和ngView时，我在AngularJS中遇到自定义指令 - 上传文件的问题。当<input>字段的部分位于home.html时，它很有效，但是当我将它放到loaddata.html时它不起作用（如下所示），尽管函数loadtrans()和uploadF()工作 - $scope.file为空。我该如何解决？

指令：

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

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

}

});

home.html的

    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body ng-controller="AppCtrl">
<nav>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#" data-toggle="tab" >GPW</a></li>
    <li role="presentation" ><a href="#!/stocks" data-toggle="tab" >Load data</a></li>
    <li role="presentation" ><a href="#!/chart" data-toggle="tab" >Chart</a></li>

</ul>
</nav>
<div class="row">
    <div class="col-md-3">
        <button class="button btn-block btn-primary" ng-click="getData()">
        GetData()
        </button>
        <input type="number" ng-model="dayFrom"/>
    </div>


    <div class="col-md-3">
        <a class="button btn-block btn-primary" href="/new-wallet.html"> <button class="button btn-block btn-primary">
           Create your wallet
        </button></a>
    </div>
</div>

<div ng-view></div>

<script src="webjars/jquery/3.1.1-1/jquery.min.js" type="application/javascript"></script>
<script src="webjars/angularjs/1.6.0/angular.min.js" type="application/javascript"></script>
<script src="webjars/angularjs/1.6.0/angular-resource.min.js" type="application/javascript"></script>
<script src="webjars/moment/2.17.1/moment.js" type="application/javascript"></script>
<script src="webjars/Chart.js/2.3.0/dist/Chart.js" type="application/javascript"></script>
<script src="webjars/angular-chart.js/1.1.1/dist/angular-chart.js" type="application/javascript"></script>
<script src="webjars/angular-route/1.6.0/angular-route.js" type="application/javascript"></script>
<script src="js/app.js" type="application/javascript"></script>

</body>
</html>

loaddata.html：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="row">
    <div class="col-md-4 col-md-offset-4">

        <button class="btn btn-block btn-primary btn-lg" ng-click="loadTrans()">
            Load your transactions()
        </button>
        <div ng-show='filefield' >
            <!--   <label class="btn btn-default">-->
            Browse..
            <input type="file" upload-file="file" >
            <!--   </label>-->
            <button class="btn btn-default " ng-click="uploadF()">
                Submit
            </button>
        </div>
    </div>
</div>
</body>
</html>

功能：

     $scope.loadTrans=function(){
       $scope.filefield=true;

   }
    $scope.uploadF=function(){
           console.log("upload");
           console.log($scope.file);
           var fileFormData = new FormData();
           fileFormData.append('file', $scope.file);
           console.log($scope.file);
           $http.post("http://localhost:8080/loadfile", fileFormData, {
                           transformRequest: angular.identity,
                           headers: {'Content-Type': undefined}})
           .then(function(data){

               var t = angular.fromJson(data.data.trans);
               for (var key in t)
               {
                   for(var k in t[key])
                   {
                       $scope.labels.push(k);
                       $scope.data.push(t[key][k]);
                   }
               }
               $scope.chartDataService.status = 'Done';
               console.log($scope.data);
               $scope.chartDataService.data = $scope.data;
               $scope.profit = data.data.success;
               $scope.trans = data.data.trans;
               $scope.uploadSuccess=true;
               $scope.time = moment().fromNow();
           },
           function(status){
               console.log('errors');
           });

       };

编辑：修改后的指令有效：

    app.directive('uploadFile', function($parse){
    return {
        restrict: 'A',
        scope:false,
        link: function(scope,element,attrs){
            var model = $parse(attrs.uploadFile),
                modelSetter= model.assign;
                console.log("directive");
                console.log(model);

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

                });

            });
        }

    }

});

但我认为这不是普遍的解决方案..例如。当我在ng-view中使用该指令时。

EDIT2：我解决了这个问题如下。如果您有更好的解决方案，请与我分享。

app.directive('uploadFile', function($parse){
    return {
        restrict: 'A',

        link: function(scope,element,attrs){
            var model = $parse(attrs.uploadFile),
                modelSetter= model.assign;
                console.log("directive");
                console.log(model);

            element.bind('change', function(){
                scope.$apply(function (){
                    if(scope.$parent === scope.$root)
                        modelSetter(scope,element[0].files[0]);
                    else
                        modelSetter(scope.$parent,element[0].files[0]);
                    console.log(element[0].files[0]);
                    console.log(scope);

                });

            });
        }

    }

});

Answer 1

这解决了我的问题：

    app.directive('uploadFile', function($parse){
    return {
        restrict: 'A',

        link: function(scope,element,attrs){
            var model = $parse(attrs.uploadFile),
                modelSetter= model.assign;


            element.bind('change', function(){
                scope.$apply(function (){
                    if(scope.$parent === scope.$root)
                        modelSetter(scope,element[0].files[0]);
                    else
                        modelSetter(scope.$parent,element[0].files[0]);


                });

            });
        }

    }

});

AngularJS，ng-view，ng-route，file-upload自定义指令不起作用

1 个答案: