current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 1 down vote favorite

I know this question has been asked multiple times on SO, but I couldn't find any answer

I've got a directive that is responsible of file uploads.

Here is the code of my directive :

    var directive = {
        restrict: 'AE',
        scope: {
            settings: '='
        },
        controller: 'fileUploaderCtrl',
        replace: true,
        template: '<div class="fileTransferContainer uploadContainer" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="dropBox">\
                        <fieldset>\
                            <legend>Uploads in progress</legend>\
                            <div ng-repeat="file in selectedFiles" class="fileTransfer">\
                                <span class="up_fileSize"> {{file.size / 1024 | number:2}}KB</span>\
                                <span>{{file.sizeUploaded()}}</span>\
                                <div class="progressContainer">\
                                    <div class="up_actions">\
                                        <span>\
                                            <button>\
                                                <a ng-click="remove($index)" class="small_icon white_delete"></a>\
                                            </button>\
                                        </span>\
                                    </div>\
                                </div>\
                            </div>\
                        </fieldset>\
                    </div>'
              }
             [...]

And into my controller, I have the following code :

    $scope.remove = function (index) {
        debugger;
        $scope.selectedFiles.splice(index, 1);
        $scope.sendUpdatedModel();
    }

What I've tried :

As far as my ng-click is inside a ng-repeat, I was wondering if it was not related to scope inheritance. I've tried this, with the same results (working in chrome but not in firefox)

  ng-click="$parent.remove($index)"

I've also modified the controller function that way :

    function remove(index) {
            $scope.selectedFiles.splice(index, 1);
            $scope.sendUpdatedModel();

    }
    $scope.remove = remove;

It was also working on chrome, but not in firefox

note that I don't have any error in the console. At this point, I have no idea what I can check/do to understand this bug

share|improve this question
1  
try adding href="" to your <a></a> some versions of FF don't take mouse events on anchor tags unless they have an href, you can also use a button and style it as an anchor, thats more compatible and semantically correct since anchors are meant to be links – Dayan Moreno Leon Jan 26 at 16:14
    
@DayanMorenoLeon Thx, you pointed me the problem without knowing. My anchor was inside a button. So I deplaced the ng-click – Deblaton Jean-Philippe Jan 26 at 16:21
    
i didn't even noticed i just assumed you wouldn't do something like that.. – Dayan Moreno Leon Jan 26 at 16:26

1 Answer 1

up vote 2 down vote accepted

It appears that it is not that good to have a <a> inside a <button>.

I put the answer here, we never know if someone can make errors as stupid as mine ;-)

              <button ng-click="remove($index)" >\
                   <a class="small_icon white_delete"></a>\
              </button>\
share|improve this answer
    
What if you want the click on the a and not the button though? Then what? – Sachin Kainth Jul 2 at 11:12
    
@SachinKainth You remove the button – Deblaton Jean-Philippe Jul 2 at 14:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.