AngularJS 1.5 지시어 범위 ng-include

Question

여기에 uploadfile 지시문이 포함 된 코드 http://jsfiddle.net/miuosh/n6yppypj/이 있습니다. 문제는 내가 이것을 사용한다는 것입니다.

<input type="file" file-model="myFile" /> 
    <button ng-click="uploadFile()">upload me</button> 

은 ng-include = " 'views/uploadFileForm.html'"입니다.

지시문에서 "myFile"을 범위에 추가합니다. Angular는 myFile을 사용하여 새로운 범위를 만듭니다. "으로 myfile"추가하려면에 "rootScope"나는 내가 얼마나 많은 부모 범위를 알 필요가 있기 때문에 불편

modelSetter(scope.$parent.$parent.$parent[..],element[0].files[0]) 

를 사용해야합니다.

Answer 1

나는 각도로 파일 입력을 처리하는 비슷한 문제에 직면 해있다. 파일 변경 내용을 듣고 파일로 컨트롤러 기능을 호출하는 지시문을 만들 수 있습니다. 여기에 jsFiddle입니다.

var app = angular.module('app', []); 

app.controller('yourCtrl', function() { 
    $scope.image; 
    $scope.imageChanged= function (files) { 
     $scope.image = files; 
    }; 
}); 

app.directive('customOnChange', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var onChangeFunc = scope.$eval(attrs.customOnChange); 
     element.bind('change', function(event){ 
     var files = event.target.files; 
     onChangeFunc(files); 
     }); 

     element.bind('click', function(){ 
     element.val(''); 
     }); 
    } 
    }; 
}) 

<input type="file" id="imgInput" custom-on-change="imageChanged"/>