angular ng-if 与 bootstrap 弹出窗口不工作

Question

<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>

我正在使用上面的代码。从那里我通过单击-info-sign glyphicon 显示一个弹出窗口，我使用 ng-if 条件 show/hide 而不是 ng-show 和 ng-hide.My 问题是当我使用 ng-if 时， popover 不是 working.But popover 在 ng-hide 条件下工作，如果我删除 ng-if condition.My 问题是为什么 popover 在 ng-if 条件下不工作。

Answer 1

明白了！是，ng-if 阻止 DOM 元素被渲染，而 ng-show / ng-hide 只改变 display css-poperty

请参考 angular 文档的第一段 ng-if

Answer 2

这是演示 ngif 工作原理的示例

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>

angular ng-if 与 bootstrap 弹出窗口不工作

angular ng-if with bootstrap popover not working

html

angularjs

twitter-bootstrap-3

popover