CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap-3popover
Lee
Lee

Reputation: 128

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.

Upvotes: 1

Views: 3557

Answers (2)

Kulbhushan Singh
Kulbhushan Singh

Reputation: 536

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

Upvotes: 6

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

Here is the example that demostrate how ng-if works

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.firstname = "Test Data";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    <div ng-if="lastname"></div>
    <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">
      <label>Last Name</label>
      <input readonly type="text" class="form-control" id="last_name" ng-model="lastname" placeholder="Last Name">
    </div>
  </div>
</body>

Upvotes: 0

Related Questions