Angularjs '$ element' directive - comment due to ng-if

Question

I am trying to create a popup (dialog) directive for my angularjs application. (there is still a lot of todo ...) However, I created a template file that creates a pop-up element with the insertion of values ​​from the attributes passed with the directive element.

The thing is, I have several ng-ifs in this template to check various property values ​​in the area, and then angular inserts comments like

<!-- ngIf: active --> 

before and after the corresponding elements. This way I get comments instead of the actual element in the $ element argument in the controller!

Why is'nt angular skipping comments there? how can i overcome this?

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 really appreciate any comments.

Answer 1

I'm not sure I fully understand your problem, but if you want to work with directives on these elements, I would recommend using ng-show and ng-hide instead of ng-if , since the latter can really screw up any event handlers that you apply according to directives.

With ng-if , a node is added and removed from the DOM (so I assume it is inserted as a comment in your directive), while ng-show and ng-hide just make the node look invisibly stylish, preserving any and you can easily manipulate content.