angularjs - Directive / controller scope undefined when injecting directive in controller -

i have html

<input type="file" file-input="files" multiple /> <button ng-click="upload()" type="button">upload</button> <li ng-repeat="file in files">{{file.name}}</li> 

this directive:

.directive('fileinput', ['$parse', function($parse){     return {         restrict: 'a',         link: function(scope, elm, attrs){             //console.log("directives scope: ")              elm.bind('change', function(){                  $parse(attrs.fileinput)                 .assign(scope,elm[0].files)                 scope.$apply()                 //console.log(scope);             })         }     } }]); 

and in controller have function:

$scope.upload=function(){     console.log($scope.files)     var fd = new formdata() // put these 3 lines in service     angular.foreach($scope.files, function(file){       fd.append('file', file)     })     $http.post('/api/directory/upload-file-test', fd,     {       transformrequest: angular.identity, // returns first argument passed       headers:{'content-type': undefined} //multipart/form-data     })     .success(function(d){       console.log(d)       console.log("works?")     })   } 

it works fine if put html directly in html file you'd do, however...

i need inject it, , when that, directive scope , controller scope not same.. files i've added scope.files in directive "undefined" inside controller function, file upload breaks...

more exactly...

if this:

<tr ng-repeat="prop in tab.properties">   <td>{{prop.name}}</td>   <td compile ng-bind-html="prop.data_type.html | unsafe"></td>   <td>{{prop.description}}</td> </tr> 

where content inside ng-bind-html quotes (prop.data_type.html) equals this:

<input type="file" file-input="files" multiple /> <button ng-click="upload()" type="button">upload</button> <li ng-repeat="file in files">{{file.name}}</li> 

it doesn't work. scopes different.

my compile-directive looks this:

.directive('compile',function($compile, $timeout){     return{         restrict:'a',         link: function(scope,elem,attrs){             $timeout(function(){                                 $compile(elem.contents())(scope);                 });         }             }; }) 

and last relevant bit of code unsafe-filter this:

.filter('unsafe', function($sce) {     return function(val) {         return $sce.trustashtml(val);     }; }) 

does have idea why "upload" function inside controller , directive scope cannot stay synced , reference same scope if , if inject html compile-directive , unsafe-filter via ng-bind-html? there anyway around or must refrain using directives make work?

i've tried first angular 1.3.0 rc4 , after upgraded latest version v. 1.3.5 it's still same.

i able solve this, , here's simple solution:

(old code):

<input type="file" file-input="files" multiple /> <button ng-click="upload()" type="button">upload</button> <li ng-repeat="file in files">{{file.name}}</li> 

replaced this:

<input type="file" file-input="test.files" multiple /> <button ng-click="upload()" type="button">upload</button> <li ng-repeat="file in test.files">{{file.name}}</li> 

and old code:

.directive('fileinput', ['$parse', function($parse){     return {         restrict: 'a',         link: function(scope, elm, attrs){             //console.log("directives scope: ")              elm.bind('change', function(){                  $parse(attrs.fileinput)                 .assign(scope,elm[0].files)                 scope.$apply()                 //console.log(scope);             })         }     } }]); 

should replaced this:

.directive('fileinput', ['$parse', function($parse){     return {         restrict: 'a',         link: function(scope, elm, attrs){             if(typeof(scope.test) == undefined){               scope.test = { "files": []}             }             if(typeof(scope.test.files) !== undefined){               scope.test["files"] =[]             }             elm.bind('change', function(){                  $parse(attrs.fileinput)                 .assign(scope,elm[0].files)                 scope.$apply()             })         }     } }]); 

and same controller function (old code first):

$scope.upload=function(){     console.log($scope.files)     var fd = new formdata() // put these 3 lines in service     angular.foreach($scope.files, function(file){       fd.append('file', file)     })     $http.post('/api/directory/upload-file-test', fd,     {       transformrequest: angular.identity, // returns first argument passed       headers:{'content-type': undefined} //multipart/form-data     })     .success(function(d){       console.log(d)       console.log("works?")     })   } 

solution:

  $scope.test = {files:undefined}    $scope.upload=function(){     console.log($scope.test.files)     var fd = new formdata() // put these 3 lines in service     angular.foreach($scope.test.files, function(file){       fd.append('file', file)     })     $http.post('/api/directory/upload-file-test', fd,     {       transformrequest: angular.identity, // returns first argument passed       headers:{'content-type': undefined} //multipart/form-data     })     .success(function(d){       console.log(d)       console.log("works?")     })   } 

if need more explanation, wise man josh david miller have here. comment made me realize how solve problem: https://stackoverflow.com/a/15645354/3973406

basically has nothing isolate scope, because breaking rule , angular being bitch it!