0

I have created a file upload directive that displays an alert box when the file(s) have uploaded successfully. However, when the user first navigates to the page, the alert box is shown with the .ng-hide-add class, which fades the alert-box out.

I could use ng-if to prevent this initial behaviour, but because it creates its own scope and I have some elements within it, I cannot use this workaround.

I found a potential solution here, but neither options seem to work for me (inline style with display none or using ngClass).

HTML:

<div ng-show="success" class="alert-box success animate fadeInLeft">Files Successfully Uploaded!</div>

Directive:

app.directive('fileUpload', ['$fileUploader', '$timeout',
    function($fileUploader, $timeout){
        return {
            restrict: 'E',
            replace: true,
            scope: {
                showQueue: '=',
                imagesOnly: '='
            },
            templateUrl: 'templates/files/upload.html',
            link: function(scope, element, attrs) {
                scope.success = false; // initially setting the variable to false to hide element

                uploader.bind('success', function(event, xhr, item, response) {
                    scope.success = true;
                    $timeout(function() {
                        scope.success = false;
                    }, 2000);
                });

                // ...

            }
        }
    }]);
Community
  • 1
  • 1
csm232s
  • 1,660
  • 4
  • 32
  • 60
  • You could try to set an initial value of success (success = "false") and bind it into the scope. In this way the variable would exist even before the link function. I did not test this, but if you read [Understanding How Scopes Work with Transcluded Directives](http://docs.angularjs.org/guide/compiler), you see it does something similar. – pasine Mar 23 '14 at 16:49
  • Not sure if it's relevant but have you tried ng-cloak http://docs.angularjs.org/api/ng/directive/ngCloak or is this an issue beyond that? – shaunhusain Mar 23 '14 at 17:50
  • @shaunhusain Thanks, didn't know about ngCloak. Unfortunately it didn't resolve the issue – csm232s Mar 23 '14 at 18:07
  • @notme I added success to the controller and binded it to the directive scope but with partial success. When I navigate directly to the page or reload the page, the element is shown on load. But when navigating to the page from another, it is hidden. – csm232s Mar 23 '14 at 18:13

0 Answers0