0
ngRouteとngViewで使用するとき、AngularJSのカスタム定義ディレクティブ（ファイルをアップロードする）に問題があります。 <input>フィールドのセクションがhome.htmlにあるときはうまく動作しますが、loaddata.htmlに置くと、機能がloadtrans()とuploadF()の場合でも動作しません（下記参照）。$scope.fileがnullです。どうすれば修正できますか？AngularJS、ng-view、ng-route、file-uploadカスタムディレクティブが機能しない
ディレクティブ：
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');
});
};
EDIT：例えば...
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);
});
});
}
}
});
あなた自身の質問への答えとして、あなたのソリューションを投稿してください。 –