关于angular的directive的问题？

Question

<form method="post" enctype="multipart/form-data" action="">

<div class="up-load-img">
    <i style="background-image: url({{upLoadCover}});"></i>
</div>
<div class="up-load-btn">
    <img src="assets/images/public/plus.png" />
    <input type="file" name="file" onchange="angular.element(this).scope().imgUpload(this.files)"/>
</div>

</form>
这部分是自定义控件的DOM元素，自定义成功后是<upload-image></upload-image>这个。
然后是js部分。这样选择成功后可以预览了。但是如果页面上有两个<upload-image></upload-image>这个，选择图片后两个都会同时改变。怎么解决？

app.directive('uploadImage', function() {

return { 
    restrict : 'E', 
    templateUrl : 'modules/v_upload/upload-img.html', 
    replace : true,
    link : function(scope, element, attr)
    {
        scope.upLoadCover = "assets/images/public/default.png";
        
        scope.imgUpload = function(files)
        {
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            
            reader.onload = function(evt)
            {
                scope.$apply(function(){
                    scope.upLoadCover = evt.target.result;
                });
            }
        }
    }
}; 

});

Answer 1

用独立作用域就行了
scope: {}

Answer 2

说说我蠢蠢的做法，加个计数吧
var a=1;
if(a=1){

return{
    
    
    };

}

不行勿喷啊，也才用angular没多久

Answer 3

你看一下 link函数的element和attr参数的使用 通过操作dom改变试试