指令/控制范围，控制

Question

注入指令时未定义我有这个网站

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

该指令：

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

，并在我的控制器我有这样的功能：

$scope.upload=function(){ 
    console.log($scope.files) 
    var fd = new FormData() // put these 3 lines in a 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 it is passed 
     headers:{'Content-Type': undefined} //multipart/form-data 
    }) 
    .success(function(d){ 
     console.log(d) 
     console.log("works?") 
    }) 
    } 

它工作正常，如果我只是把HTML直接放在HTML文件中，正如你通常所做的那样...

我需要注入它，当我这样做时，指令作用域和控制器作用域是不一样的..所以我已经添加到指向scope.files的文件在控制器内部是“未定义的”功能，所以我的文件上传休息...

更确切地说...

如果我这样做：

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

凡NG绑定，HTML引号内的内容（prop.data_type .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> 

它不起作用。范围是不同的。

我的编译指令看起来像这样：

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

和代码的最后相关位将是不安全的过滤器是这样的：

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

有没有人有一个想法，为什么我的“上传”功能，我的控制器和我的指令范围不能保持同步和引用相同的范围如果只有如果我注入我的html与我的编译指示和不安全筛选器通过ng-bind-html？无论如何，还是我必须避免使用指令来完成这项工作？

我已经尝试过第一次使用Angular 1.3.0 rc4，现在升级到最新版本1.3.5之后，它仍然是一样的。

Answer 1

我能解决这个问题，而且这里的简单的解决办法：

（旧代码）：

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

这种替换：

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

，这所老代码：

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

Sh

.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() 
      }) 
     } 
    } 
}]); 

，并与控制器功能（旧代码首先）相同：乌尔德这种替代

$scope.upload=function(){ 
    console.log($scope.files) 
    var fd = new FormData() // put these 3 lines in a 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 it is passed 
     headers:{'Content-Type': undefined} //multipart/form-data 
    }) 
    .success(function(d){ 
     console.log(d) 
     console.log("works?") 
    }) 
    } 

解决方案：

$scope.test = {files:undefined} 

    $scope.upload=function(){ 
    console.log($scope.test.files) 
    var fd = new FormData() // put these 3 lines in a 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 it is passed 
     headers:{'Content-Type': undefined} //multipart/form-data 
    }) 
    .success(function(d){ 
     console.log(d) 
     console.log("works?") 
    }) 
    } 

如果你需要更多的解释，智者男人约什大卫米勒在这里。这是让我意识到如何解决这个问题的评论：https://stackoverflow.com/a/15645354/3973406

基本上它与孤立范围无关，但是因为我们打破了规则，而且Angular是一个婊子！