可以指令

Question

不UDPATE型号我不明白为什么，如果我加入更多的元素，以我的数组一个指令的控制器内，不会在视图显示和最差的是，如果打印我的模型，它不显示最新元素的加入

以下是我定义我的指令

angular.module('example',[]); 

angular.module('example').directive('documentUpload', function() { 

function link($scope, $element, attrs, ngModelCtrl) { 
    $element.find('input[type="file"]').on('change', function(){ 
     $scope.submitFile(this);  
    }); 
} 

return { 
    restrict: 'E', 
    templateUrl: 'document-upload.html', 
    controller: function($scope,$element) { 
     $scope.files = [{ name : "blah", src: "blah" }]; 
     $scope.submitFile = function(file,container) { 
      var currentFile = file.files[0]; 
      var reader = new FileReader(); 
      reader.onloadend = function(){ 
       $scope.files.push({ 
        name: currentFile.name, 
        src : reader.result 
       }); 
       console.log($scope.files); 
       console.log($scope.example); 
      } 

      reader.readAsDataURL(currentFile); 
     }; 
    }, 
    alias: 'document', 
    link: link 
} 

}).directive('imageFiles', function($compile) { 
    return { 
     scope: { 
      file: "=" 
     }, 
     template: '<img ng-model="file" ng-src="file.src" alt="file.name" class="img-responsive"/>' 
    } 
}); 

如果我想看看在视图模型没有显示最新加入的元素，

<div class="row"> 
<pre>{{ files }}</pre> 
<div class="col-lg-12"> 
    <form method="POST" enctype="multipart/form-data" ng-submit="submit(document)"> 
     <input type="file" name="file" ng-model="document.file"/>   
    </form> 
</div> 
<div class="row" ng-repeat="file in files" image-files> 

这里有一个现场Example

Answer 1

好了，所以这里是发生了什么。由于您使用reader.onloadend是外部函数或插件，无论它是什么。它缺少内部角度摘要过程。

这就是你需要添加$范围的情况下，$适用（）你推到后阵。

$scope.files.push({ 
    name: currentFile.name, 
    src : reader.result 
}); 
$scope.$apply(); 

这迫使角度刷新自己。

这里是一个工作plunker只是为了安全起见。

http://plnkr.co/edit/w3u3VWMC9e8h1L0Bhkuh?p=preview