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

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

• javascript
• angularjs
• firefox

• 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 patible and semantically correct since anchors are meant to be links – Dayan Moreno Leon Commented Jan 26, 2015 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 Commented Jan 26, 2015 at 16:21
• i didn't even noticed i just assumed you wouldn't do something like that.. – Dayan Moreno Leon Commented Jan 26, 2015 at 16:26

1 Answer 1

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>\