Search code examples
htmlangularjstwitter-bootstrap-3popover

angular ng-if with bootstrap popover not working

<div class="form-group" ng-if="firstname">
    <label>First Name</label>
    <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
    <a href="" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="User Name" class="glyphicon glyphicon-info-sign infottp"></a>
</div>

I am using above code. From that i am displaying a popover by clicking -info-sign glyphicon, i am using ng-if condition for show/hide instead of ng-show and ng-hide.My problem is when i use ng-if, popover is not working.But popover working in ng-hide condition and if i remove ng-if condition.My question is why popover not working in ng-if condition.

Solution

  • Gotcha! is, ng-if prevents DOM Element from being rendered, where as ng-show / ng-hide only changes display css-poperty

    please refer first paragraph of angular documents for ng-if