javascript - angularjs 自定义指令时数据无法更新

问题描述

问 题

写了一个图片上传的指令

upload.directive('uploadFile',function(){
    return {
        restrict: 'A',
        link: function(scope, element, attr) {

            element.bind('change',function(event){
                var file = this.files[0];
                var name = this.name;
                scope.onchange(name, file);
            });

        }

    };
});

<div class="upload">
    <div ng-show="!isUp">
        <input type="file" name="myPic"  upload-file id=""/>
    </div>
    <div ng-click="delPic()" ng-show="isUp">
        <span>删除</span>
        <img src="{{imgurl}}"/>
    </div>
</div>

当我选择a图上传以后，如何清空input的值呢？因为如果不清空input的值，我删除a图片以后($scope.isUp=false; $scope.imgurl=''),再选择a图就没效果了，因为input绑定的时change事件，input的值不发生改变的话是不会调用$sope.onchange的

解决方案

清空的话，只要：

element.bind('change',function(event){
    var file = this.files[0];
    var name = this.name;
    scope.onchange(name, file);
    this.value = '';
});

这篇关于javascript - angularjs 自定义指令时数据无法更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！