指令/控制範圍，控制

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是一個婊子！