angularjs directive's '$element' is a comment because of ng-if

Question

I'm trying to build a popup (dialog) directive for my angularjs application. (still lots todo...) However I made a template file which builds the popup element, with insertion of values from the attributes passed with the directive element.

The thing is, I have in that template a few ng-ifs for checking different values of properties in the scope, then angular inserts comments like

<!-- ngIf: active -->

before and after the relevant elements. So I get comments instead of the actual element in the $element argument in the controller!

Why is'nt angular skipping the comments there? how can I get over that??

my template code (popup_template.html):

 <div class="{{className}}" ng-if="active" style="{{popupStyle}}" ng-keyup="closeByEscape($event)">
    <div class="vex-overlay" style="{{overlayStyle}}"></div>

    <div class="vex-content" style="{{contentStyle}}">
        <form class="vex-dialog-form" ng-if="type=='plain'">
            <div class="vex-dialog-message" ng-if="message!=null">
                {{message}}
            </div>
        </form>
        <div ng-if="type=='advanced'" class="transcluded">

        </div>
        <div class="vex-close" ng-if="showCloseButton" ng-click="close()"></div>
    </div>
</div>

now my angular code:

app.directive('popup', ['popupfactory', '$timeout', function (popupfactory, $timeout) {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'popup_template.html',
    transclude: true,
    scope: false,
    link: function (scope, element, attrs, $timeout) {

        /* Declarations of all scope variables*/

        /*** Here, element is a comment! ***/

    },
    controller: ['$scope', '$element', '$attrs', '$transclude', '$http', function ($scope, $element, $attrs, $transclude, $http) {

      /*** Here, $element is a comment! ***/

    }],
};
}]);

I would be very thankfull for any comment.

Answer 1

I'm not sure I understand your problem entirely, but if you want to work with directives on those elements I would recommend using ng-show and ng-hide instead of ng-if, as the latter can really screw with any event handlers you apply via directives.

With ng-if the node is added and removed from the DOM (thus I guess inserted like a comment into your directive) while ng-show and ng-hide just make the node invisible through styling, keeping any handlers alive and allowing you to manipulate the content easily.