AngularJS、ng视图、ng路由、文件上载自定义指令不'；行不通_Angularjs_Angularjs Directive

AngularJS、ng视图、ng路由、文件上载自定义指令不'；行不通

angularjs

AngularJS、ng视图、ng路由、文件上载自定义指令不'；行不通,angularjs,angularjs-directive,Angularjs,Angularjs Directive,当与ngRoute和ngView一起使用时，我对AngularJS中的自定义指令（上传文件）有一个问题。当带有字段的节位于home.html中时，它工作得很好，但当我将其放入loaddata.html时，它不工作（如下所示），尽管函数loadtrans（）和uploadF（）work-$scope.file为空。我怎样才能修好它指令： app.directive('uploadFile', function($parse){ return { restrict: 'A', li

当与ngRoute和ngView一起使用时，我对AngularJS中的自定义指令（上传文件）有一个问题。当带有

字段的节位于

home.html

中时，它工作得很好，但当我将其放入loaddata.html时，它不工作（如下所示），尽管函数

loadtrans（）

和

uploadF（）

work-

$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>

编辑：修改指令，该指令起作用：

    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视图中使用此指令时

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

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);

                });

            });
        }

    }

});

这解决了我的问题：

    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]);


                });

            });
        }

    }

});

请将您的解决方案作为您自己问题的答案发布。

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);

                });

            });
        }

    }

});

    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]);


                });

            });
        }

    }

});