self-toggling-directive-with-ngif.md

Whats the best, most idiomatic way to make a self-closable directive?

Pass in ng-if?

<toggleBox ng-if="someCondition"></toggleBox>

angular.module('myModule').directive('toggleBox', function() {
    return {
        bindToController: true,
        controller: function() { this.close = function() { this.ngIf = false; }; },
        controllerAs: 'box',
        scope: { ngIf: '=' },
        template: '<div>box <a on-click="box.close()">x</a> </div>'
    };
});

Passing in a function

<toggleBox ng-if="someCondition" on-close="toggleSomeCondition()"></toggleBox>

angular.module('myModule').directive('toggleBox', function() {
    return {
        bindToController: true,
        controller: angular.noop,
        controllerAs: 'box',
        scope: { onClose: '&' },
        template: '<div>box <a on-click="box.onClose()">x</a> </div>'
    };
});

Something Else I didn't think of?

@jaesung2061, I think you mis-interpreted my question lol. Perhaps using the "self-closing" html element in my example was confusing, I'll change that, but in the title, I meant self-closing as in reference to a directive having a control inside of it which removes itself from the dom via an ng-if on the element