How to hide an element after inserting into body?

Question

JavaScript

There is a directive:

.directive('location', function () {
        return {
            restrict : 'A',
            scope    : {},
            replace  : true,
            templateUrl: 'common/components/location/location.html',
            link     : function (scope, element, attr) {……}
        }
});

It is used like this:

var scope     =  $rootScope.$new(true);                
var directive = $compile('<div location></div>')(scope);

$document.find('body').append(directive);

directive.hide(); - не работает

Live example: plnkr.co/edit/e7fNua?p=preview Can

you please tell me how to hide html after pasting into body?

Answer 1

.directive('location', function () {
                    return {
                        restrict : 'A',
                        scope    : {},
                        replace  : true,
                        templateUrl : 'part.html',
                        link     : function (scope, element, attr) {
                          element.hide();
                        }
                    }
                })

so you can't?
In general, follow the logic:
- we take a DIV element and hang a directive on it
- we compile the element
- we insert it into the DOM and hide it
- angular removes the element and replaces it with a template (with a delay since the ajax request is executed after the template).
since we don't even have the ability to determine the point in time when the replacement occurs from outside the directive, we can't just hide the element. Unless so, but you know, it sucks.

body.append(directive);
setTimeout(function () {
     body.find('[data-location], [location]').hide();
}, 250);

The solution is to omit replace, insert template manually and omit templateUrl.